We’ll create additional spacing with new columns and rows. Then we’ll make the size of the main content column dynamic within the minimum and maximum range.
Looking at our page we can notice that we need more space around the layout.
We could use margins for that, for example, we could add 40px margin on all sides.
But there is a better way.
We can add spacing to our existing CSS Grid. The benefit of that is that we can make the spacing dynamic.
So, first, let’s set the body margin to 0, so that our grid takes up all the available space on the page.
Open the Grid Editor.
To add the spacing on the sides we add one column at the beginning and another column at the end.
We need to specify the size, let’s start with a fixed size.
The first column should be empty, so we remove named areas there. Just double click on the area name and select the empty item.
Ok, now we have the empty space on the sides.
We can make the size dynamic, a % value of the width.
Now the spacing expands a bit.
But the layout doesn’t work well on larger device sizes.
The content is too stretched out, making it hard to read.
So we need to fix the size of the Content column somewhat. Just fixing it to 400px or so makes the layout too static.
Luckily, CSS Grid offers a bunch of smart sizing options.
Double click on the size field to see some presets for inspiration.
MinMax is the one useful for our case.
Let’s make the editor bigger.
MinMax has two parameters: the minimum size and the maximum size of the column. The actually size of the column will be between these two sizes.
Let’s set the minimum value to 300px and the maximum to 600px.
With this we make sure that the content doesn’t shrink or grow too much.
The size of the Grid is now kind of fixed. Our margins are set with %.
That’s a good opportunity for using the Fraction unit.
Let’s set the size of the first and the last columns to 1fr.
The space on the left and the right expands equally.
If we increase the size of one size it will take up proportionally more space.
Remember, the Fr units distribute the whole available space. For example, here we have the total of 5fr, 1 plus 4.
So the available space (the space not occupied by our two fixed sized columns) is divided into 5 equal parts. 1 of these parts is assigned to the first column and 4 parts to the last.
Now we just need some spacing on the top.
Let’s remove Header named areas from the top row…
Aha, what happened? The rule of named areas is that the area has to be rectangular. And in this situation the Header area is L shaped. The browser ignores the invalid named area declaration and our positioning is messed up.
We just need to clear out the other Header in the top row and our areas are back to normal.
Then we set the size of the top row and we’re done.
Of course, if we make the device size even smaller, our layout doesn’t work anymore, it doesn’t fit on the screen.
That’s something we’ll fix later with responsive media queries.
For now let’s focus on exploring the grid.