CSS Grid the almighty

CSS Grid is a relatively new spec that saw massive adoption from browser around the start of 2018 and is now used almost everywhere. So what it is about?

Basically, it's about making virtual grids with columns and rows. You might have met 12 column grids in CSS frameworks like Bootstrap before? That's what Grid allows you to replicate in a few lines of code, except it's way more powerful and easy to use.

Even more than Flexbox, it's a massive spec with tons of use cases and syntax tricks. It's extremely powerful but it's also easy to get lost in it, so we'll just try a few layouts and use cases to get you started with columns and rows.

So you like columns?

For this example we'll go with just 6 vertical columns. How would that work?

First we have to use display: grid; on the parent element, just like we did with flexbox. Then we can declare our grid with the grid-template-columns: ???; property.

So let's break it down, what's going on here? The repeat() shortcut is a function we use to declare the number of columns we wanted instead of writing 1fr 1fr 1fr 1fr 1fr 1fr.

The fr is a CSS unit, like pixels or percentages, that means fractional unit. In this example, 1fr repeated six times means split the space in six and give each children the same space.

So what happens if we decide that the first column should take 2 times the space of other columns? The grid readjust itself nicely:

But wait, what happens if there is not enough children? The grid keeps it's 6 column layouts and populate the 5 elements inside the 5 first columns:

If too many children, the grid will create a new row:

In Grid tutorials you will often hear about the "explicit" and "implicit" columns and rows. The explicit is the one you declared with your code. The implicit is the one created by the browser when there's no written rules to handle specific use cases or bugs. You can declare rules for both implicit and explicit grids even if I won't go into details on this.

Of course we could have a grid where columns have a fixed size in pixels. Doing so would ensure the columns keep a reasonable size even on mobile, but it would make the whole thing un-responsive!

At this point, you're probably thinking that a media query is needed to make the grid go from fr units to px units when the viewport is smaller. What a chore right ?...

Well dear reader I have something incredible for you...

Try resizing it! Great right?! So what's happening here?

• First, we removed the fixed number of columns in the repeat to let the child elements decide how much columns the grid should have. Frightening? Don't worry.
• Then, we added the auto-fit property to let child elements grow in size (it can be replaced with auto-fill if you don't want your columns to grow).
• Finally, we added the minmax function that let us define what the minimum and maximum size the column should have. We set a pixel width at the minimum to forbid the columns to shrink too much, and a fractional unit as the maximum to allow them to take as much space as they want.

What it means is this: the grid will try to stack as many children as possible inside the available width until the minimum size is met. In this case, a new row will be created.

Ok but how do I position stuff?

In CSS frameworks like Bootstrap, you have utility classes to say start here and span this much columns and you can do exactly the same with CSS Grid, using the grid-column: ? / ?; shortcut property on the column of your choice.

There's actually two syntax you can use:

? / ?

Where the first ? is the starting column and the second ? is the ending column.

? / span ?

Where the first ? is the starting column and the span ? is the width of the column in fr unit.

Let's try different things with our grid:

grid-column: 1 / 3;
grid-column: 5 / span 2;
grid-column: 2 / span 4;
grid-column: 2 / span 1;
grid-column: 5 / span 1;
grid-column: 1 / 7;

Results in:

Ok, what about the rows?

It's basically the same as the columns, except it's for the rows. Use the grid-template-rows to declare the number of rows you need. And of course, you can decide where to place each children using grid-row, the equivalent for rows of grid-columns. It's super useful for art directed pages as you can place everything where you want.

All this is quite complicated, is there a simpler way?

It can become messy to work this way, so one final tip for you: the best way to make complex layouts from row and grids is to use grid-template-area: ??; and grid-area: ??;, a very funky yet super useful combination of CSS grid.

With this syntax, you draw your layout inside a string in CSS, declaring names for each of your child elements. Let's say we have 5 elements that we want to shape like a star. The result would look like this:

grid-template-areas:
"lefttop . righttop"
". center . "
"leftbottom . rightbottom";

By doing this, we created a 3 by 3 grid. The . character inside the declaration means an element exists but has no name and thus, should be given empty space. Now all we have to do is report those names to our children and voila:

This syntax is very useful for more visual minded people and can lead to great art directed pages. The Smashing Magazine website has a very nice article on the subject on this page.

I want MOAR!

If you want to train your CSS grid skills, try playing the amazing Grid Garden game on this page. If you want more examples but in a sort of short video format, visit this page. For a complete free video course on CSS Grid, I recommend this one.

Congratulations for reading thus far, that was a lot to take! Now let's talk about the content of your pages and about the elements you're going to use to format it!

Next: Order your titles correctly