Advertisement
  1. Web Design
  2. CSS Grid Layout
Webdesign

Save Time With the CSS “grid” Shorthand Property

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
The Quirks of CSS Grid and Absolute Positioning

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:

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:

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:

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:

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

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

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 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:

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

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

We can do that too, as follows:

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!

Relevant Tutorials and Links

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.