â–Ľ
Streaming live at 10am (PST)

Problem solving flexbox or grid? đź‘Ť

#1

Hi awesome webflow community :cowboy_hat_face:

Trying to figure out how to use grid and flexbox to get my designs work correctly.

I have two problems.

  1. The first section has sort of two column grid where there is image on the left and text blocks on the right. In reality there are a bunch of rows to get the text working but I can’t get the padding right… Would you do the top section with grid only or use flexbox to get it look like my design?

  2. The second section below the above the fold part needs to have those square images with two different text blocks on top of each other as in the design. Now I can’t figure out how to stack two text boxes on top of each other when using grid. How would you create that section?

Attached you’ll find my design and here you can peak at how the design is looking at right now: https://formsupreme.webflow.io/

I really appreciate your expertise and help :sweat_smile:

50
Screen Shot 2018-12-08 at 18.00.50.jpg1850x1394 737 KB

#2

That should be simple and straight forward.

So, here, no need for Grid.

You can achieve this using either Column elements or Flexbox. As you’re not using the Container and Webflow’s grid, let’s say Flexbox.

1 section for the top part, with 2 divs inside, one set to 60% with, the other 40% width and a padding of 40 on top bottom left and right. The section is flexbox horizontal.

1 section for the bottom part, with 4 divs inside, all sharing a “cell” class set to 25vw width and 25vw height to keep them square.

#3

@Vincent you the man! Got most of it working except the text in the second part. Any tips how to get them match the design?

You’ve already been super helpful and I’m very grateful for that :pray:

Btw damn nice beard you are rocking!

#4

Sure, can you share your read-only link please?

Lol, this is where all my CSS powers rests.

#5

Ah, here goes https://preview.webflow.com/preview/formsupreme?utm_source=formsupreme&preview=dc0fec4ce7717ef9ea45be6cea7ebd4e

#6

Cool site.

Watch the video. I start by redoing the base stylng of your squares with a common class. When that’s done, when all the common properties are set, I add a combo class to the last three of them to add specific local styles such as the bg image. This way, down the road, I can modify my .cell class and it affects all the elements.

Proceed like that for everything you do in html/css.

Then I used Flexbox vertical and centered to style the cells, I’m not sure what the design reference is.