Hi there!

Gridding implicit or explicit?

We all love CSS Grid, right!? Okay… maybe not everyone, but I definitely do. I really like having Grid in my toolbox, but it also feels like there’s always more to learn about it. And just the other day, I learned a neat little trick I want to share. There are two ways to make a grid item span across all columns without explicitly knowing how many columns there are. These two approaches work best in different situations.

.grid-cell {
  grid-column: 1 / -1;
}

.grid-cell {
  grid-column: 1 / 9999;
}

The first one says, start at the first grid line (1) and go to the last grid line (-1). This works only when the grid has an explicit number of columns, like grid-template-columns: repeat(3, 1fr). But! If you, like me, are using auto-fit or auto-fill so the browser calculates the number of columns based on available space, then -1 doesn’t behave the way you’d expect.

In that case, we use the second trick, which basically means span as many columns as you find, all the way up to 9999 grid lines. 9999 is just a very large number that will always exceed the number of actual columns, so the item ends up spanning the full width.

Give it a go!