Hi, if I use grid to create columns, of different widths, the gutters do not line up.
For example if I have a section with 2 columns of 1fr 1fr (50% 50%), then another section with 2fr 1fr 1fr (50% 25% 25%), I would expect the central gutters to line up, but they do not (see screenshot).
Why is this and how do you achieve this with Grid?
This is the expected behavior with grid, I believe.
The ‘fr’ unit stands for Free Space, which means the space that remains after the gutter space has been calculated. Because the second row has 2 gutters instead of 1, there is less free space overall and so your ‘2fr’ element is less wide, because half of (100% - 2 gutters) is less than half of (100% - 1 gutter).
You could almost do grid-template-columns: 50% 1fr 1fr;
So that the first column is forced to be 50%, but then it would be wider than the top one because the top one is 50% - half a gutter.
So then, assuming your gutter value is “1em” the ideal value for the bottom row may be
grid-template-columns: calc(50% - 0.5em) 1fr 1fr;
Hey Simon,
in this scenario you would look at the maximum number of columns you need (in your case 4). In your first row you would then make sure to span both items over 2 columns. You would do the same for the first item in the second row.
Best,
André
Great answers, thank you very much…
I guess some people use a 12 Col grid throughout the site.
I know it’s the right approach, it just feels a bit more of a faff than regular columns.
May I ask… what function does this Grid icon perform?..
Hey Simon,
the grid icon toggles the grid helper lines in the builder.
Best,
André
Ah, I see it now. Yes, thanks very much @aslotta
