Web Development: Save Time With the CSS “grid” Shorthand Property

Monday, August 6, 2018

Save Time With the CSS “grid” Shorthand Property

In past tutorials we’ve learned how to set up a grid, defining its explicit properties (like grid-template-columns and grid-template-areas) and even some of its implicit properties (like grid-auto-columns). In this tutorial we’re going to look at the shorthand property grid which quickly deals with all of the above in a single statement.

Your Grid, in Two Easy Lines

As usual, begin by declaring display: grid; on your container. Next, use the grid property to lay out your rows, then your columns:

.grid-1 {
  display: grid;
  grid: 100px auto 300px / repeat(2, 1fr) 100px;
}

The above statement says we want three explicit rows of 100px, auto, and 300px. And (using the repeat() function) two columns of 1fr, then one of 100px. It’s exactly the same as this longer version:

.grid-1 {
    display: grid;
    grid-template-rows: 100px auto 300px;
    grid-template-columns: repeat(2, 1fr) 100px;
}

Both statements give us this:

Adding Implicit Values Into the Mix

Implicit values are what we ask Grid to use beyond the explicit values we define. In the grid shorthand we can’t combine the two so we have to make a choice. Take a look at this, for example:

.grid-1 {
  display: grid;
  grid: auto-flow 100px / 1fr 100px;
}

In this case we’ve stuck with explicit columns (one of 1fr, another of 100px) but our rows use an abbreviated form of grid-auto-flow and grid-auto-rows. It says “when you need to add more tracks to the grid, add them as rows. And make each one 100px high.” It’s the same as this:

.grid-1 {
  display: grid;
  grid-template-columns: 1fr 100px;
  grid-auto-flow: row;
  grid-auto-rows: 100px;
}

This is fairly default behaviour, but we see a bigger change if we instead ask our implicit grid to use extra columns:

.grid-1 {
  display: grid;
  grid: 100px 300px / auto-flow 100px;
}

This gives us two rows of 100px and 300px, then effectively sets grid-auto-flow: column;. It’s the same as:

.grid-1 {
  display: grid;
  grid-template-rows: 100px 300px;
  grid-auto-flow: column;
  grid-auto-columns: 100px;
}

Now, the auto-placement algorithm places items from top to bottom, adding columns to the right when it runs out of space:

Note: we can’t declare auto-flow on both rows and columns, that won’t work.

The Packing Keyword

If you think back to our tutorial Understanding the CSS Grid “Auto-Placement Algorithm” you’ll remember we discussed sparse and dense; keywords which describe the way items are packed into a grid. These can also be used alongside auto-flow, like this:

.grid-1 {
  display: grid;
  grid: 100px 300px / auto-flow dense 100px;
}

Grid Template Areas

Template areas are a way of naming areas of our grid, in what’s almost a visually representative way. In its simplest form, we would just use grid to describe our template areas and nothing else:

.grid-1 {
    display: grid;
    grid:   "header   header   header" 
            "main     main     sidebar"
            "footer   footer   footer";
}

Then we’d state which area each grid item fills, like this:

.item-1 {
    grid-area: header;
}

If you recall our original template areas tutorial, we had some more details to give us column and row dimensions:

.grid-1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 80px 180px 80px;
    grid-template-areas:    "header   header   header"
                            "main     main     sidebar"
                            "footer   footer   footer";
}

We can do that too, as follows:

.grid-1 {
    display: grid;
    grid:   "header   header   header" 80px 
            "main     main     sidebar" 180px
            "footer   footer   footer" 80px
            / 1fr 1fr 1fr;
}

We add the column widths after the forward slash (the repeat() function won’t work in this case, but I don’t know why). And we add the row heights inline after the area declarations. This is what we end up with:

Conclusion

This tutorial should have given you an understanding of how the grid shorthand property works. Play around with it, see what other aspects of the CSS Grid module you can use with it, and let us know how much time it saves you!