I first heard about CSS Grid in late 2016. I was sitting at one of my first Tech Ladies® meetings and heard an attendee mentioned how wonderful it was. Fast forward a year and a half later and I’m finally digging deeper into the grid. As a dedicated Flexbox user, I can already tell how this will be a game changer.

The biggest question I had when starting to learn about CSS Grid was: How is Grid different from Flexbox? And I found out that in general, Grid can do everything that Flexbox can. Some people have the mindset that grid is for multi-dimensional layout whereas flexbox should be used for one-dimensional layout. But grids are great in one-dimensional layouts too – especially if you come back later and decide you want to make that layout multi-dimensional.

And voila! You have a grid. Seriously, that’s all you need. It’s great.

You’ll notice that unlike setting flexbox to display:flex, adding display:grid to your wrapper immediately makes no difference. This is because you are not explicitly defining how many columns you want in your grid. You would do this with grid-template-columns like I did above. So in this example, I’m setting up three columns for a width of 10rem each.

You can use any value you want when setting up grid-template-columns, but I suggest staying away from percentages unless you are trying to add up to 100%. That’s because you need to take into account the sum of your grid-gap (which we’ll cover in a bit), and this can be a bit tricky.

explicit vs implicit track
Before I talk about explicit and implicit tracks, let’s first talk about what tracks are. Tracks how the columns and rows are numbered. Instead of counting individual columns and rows yourself, in CSS Grid you count them by track lines. Here’s the grid we started with – I’ve numbered all the track rows and columns to make it a little easier for you to see.

You can see that we actually have four column lines and three row lines. This will help place your items on the grid.

A quick side note: If you’re using the developer version of Firefox (a beta version of regular Firefox), it has some really great dev tools for viewing column and row track numbers. If you inspect your wrapper element and then go to the layout tab, check the box for your wrapper and now your grid will look like the one below! I really hope Chrome adds an inspection feature like this in the future. It is been extremely helpful.

Let’s go back to the difference between explicit and implicit track. If we take our code from above, you will see that we have only set our own columns. In this case, we have explicitly set our columns to three, but we have explicitly set our rows. We have six items, but obviously not all of these items can fit into three columns, so the second row gets set off indirectly.

It’s a bit confusing, so I definitely recommend messing with CSS Grid to see the difference between explicit and implicit tracks.

add grid-gap
Think of a grid gap like a margin, except it will only be added between objects and not outside the grid. I’ve run into several cases when I add margins to items in a flexbox grid, only to have to go over the wrapper of the grid and set the same amount of margins to offset the margins that are set outside the grid. Thankfully with CSS Grid, you don’t have to deal with it.

Let’s take your example CSS above and add some grid-gaps.

repeat() function

It’s very easy to define how wide you want each of your columns to be when using grid-template-columns. But it’s a lot of typing if you want more columns than this. This is where the repeat() function comes in.

Here’s our example that we’re using combined with the repeat() function.

As you can see in my CSS, I’m setting three columns to be 10rems wide each. This grid will look exactly like the grid pictured in our grid-gap example. By using the repeat() function, we’re making things a little simpler and easier to read when you want to set up a lot of columns.

fractional units

Fractional units, or fr, are a new CSS length unit introduced with CSS Grid and one I can see being used all the time. Let’s say we want three columns of equal width. Instead of setting width:calc(100%/3) on the item, we can use fractional units. Think of fractional units as “free space”.

Leave a Reply

Your email address will not be published. Required fields are marked *