Three columns each with the width of if it was four columns?
-
So I’m working with a “Meet the team” page that has 7 people in the team. And I want “four people per row” as the layout rule. But with 7 people there has to be four people on the first row and three on the second.
That could work fine if I wanted everything left aligned. But I want it centered. And I just can’t get it to work. If I choose to have three columns on that last row, the width of them will be very wide. It seems like the wrapper/table’s width is always 100% and therefore all the columns will adjust to that. It seems that I can choose a custom with but that won’t be in percent. So that’s difficult to set to get to know what width every column gets so that it gets exactly the same width as on the first row. It would be so much better if I could set a width in percent.
Anyone had the same problem? Is there a good solution to this?
Here is like how I want it:
|-----|-----|-----|-----| | | | | | |-----|-----|-----|-----| |-----|-----|-----| | | | | |-----|-----|-----|
-
[edited] The last row with only 3 columns needs to be 3 x 25% right? This leaves a remaining 25% which I would divide in half to 12.5% and set that
in my section’s right and left edge paddingfor column 1 and column 5, leaving the 3 in the middle at 25%. For tablet and mobile, to reduce the unecessary height added by these empty columns, you can set column 1 and 5 widget space to 0.Here’s a quick snippet you can watch – https://www.loom.com/share/042e5bcb087b49af86029a2843fe2f4d
Better yet,since sections can grow beyond the column max-width, I’d first have a section with a single column, likely set to “no gap” and then drag in sub-sections with my 4x and 3x grids. This way, the inner sections can only grow as wide as the parent section’s max-width keeping all of those columns contained nicely inside that single parent column without any gaps.
- The topic ‘Three columns each with the width of if it was four columns?’ is closed to new replies.
