What is best practice to maintain equal sized columns in a row?

Design help General
1

This is one of those questions that will probably have a few different answers, but I am wondering how everyone maintains dimensions with columns.

I ask because as you know the width of columns are tied directly to webflows grid and can’t be set to a manual number and so rely on whatever content is inside to give them dimension. So I’m finding the only way to make each column identical is applying different margin settings to each which still won’t align pixel-perfect when working in %.

What do ya’ll do?

here is a great example of an asymmetrical grid with perfect margins. Should something like this be done with flexbox instead?

2

Yes. Flexbox is the key my friend.

4 Likes
3

I would say Flexbox :slight_smile:

Always easy to make it fill 50% (2 divs) or 33.333% (3 divs) etc etc
With the help of @PixelGeek tutorials, it made me leave columns almost entirely when Flexbox was introduced

3 Likes
4

@IggsTP thanks for the shout out :heart:

@NewInBoston Here is how to use flexbox with Dynamic lists. This may help:

2 Likes
5

I’m glad I asked, I would have been spinning my wheels trying to get something to do something it wasn’t designed to do :). Thanks for the resources everyone, I’ll be sure to check it out.

6

Yeah so flexbox pretty much solved every problem I was dealing with in under 10 minutes.

Great success.

1 Like
7

1 Like
8

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