Streaming live at 10am (PST)

Newbie - how to make a grid like this >>


#1

Hi there,

What's the best way to make a grid like this? I basically want the site exactly like this (attached photo).

I'm a bit of a webflow newbie, so what is the layout I would use to make a grid like this? I want the blocks to "position" and reposition according to device... e.g. on mobile maybe only ONE block and the others immediately underneath...

Thanks!

Here is my public share link: LINK
(how to access public share link)


#2

Using the ROW Widget.

The ROW Widget could be cool to build your example, and you would be able to decide the layout for devices. (does it stack horizontally or vertically). However, the ROW widget is based on Webflow grid, thus doesn't allow for 5 cells in a row. It's either 2, 3, 4 or 6. Not 5.

Using Flexbox

Flexbox should allow for exactly what you're looking for. A combination of width, max with, min width for the children, and flexbox properties or the parent, should do what you need.

Train on Flexbox here: https://www.flexboxgame.com/


#3

Hey @rustybadge!

@vincent is correct. Using the Flexbox Display Setting would allow you achieve this grid-style layout while remaining totally responsive. The Flexbox game is a great place to start, but personally I was able to wrap my mind around them after watching this awesome live-stream with @PixelGeek.

Hope this helpful. :smile:

Best,
Zack @ MetaFlare Media & Design


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.