Using shortcuts

A complex grid definition can result in a lot of code. Luckily, we can shorten much of the code by using shortcuts and combined definitions. Let’s look at some now.

The grid attribute

The most general and, by far, the most powerful shortcut we can use is simply called grid. This attribute receives a ton of arguments and is a shortcut for these attributes:

• grid-auto-flow
• grid-auto-rows (we’ll cover this in-depth in a later chapter, so don’t worry too much about that now)
• grid-auto-columns (we’ll also cover this in a later chapter)
• grid-template-areas
• grid-template-columns
• grid-template-rows

Not necessarily in that order, though. The official formal type definition of this shortcut is as follows:

grid =  <'grid-template'>                                   |
  <'grid-template-rows'> / [ auto-flow && dense? ]
    <'grid-auto-columns'>?  |
  [ auto-flow && dense? ] <'grid-auto-rows'>? /
    <'grid-template-columns'>

This looks complicated and, given, a lot like TypeScript. It tells us that the grid attribute can either receive an entire grid template or separate definitions for grid rows or columns. Optionally, we may also specify the grid flow with a flag (either at the row or column definition) and add values for grid-auto-rows and grid-auto-columns. Grid rows and columns are separated by a forward slash.

The shortcut may receive one of the following three combinations:

• A grid definition that we would usually use with grid-template-areas
• grid-template-rows, the auto-flow keyword (optionally with dense), and grid-template-columns (equivalent to using grid-auto-flow: columns;)
• The auto-flow keyword (optionally with dense), grid-template-rows, and grid-template-columns (equivalent to using grid-auto-flow: rows;)

Mind the position of the auto-flow keyword in the last two combinations. The keyword’s position determines how the grid flows.

To illustrate, let’s have a look at an example:

.grid {  display: grid;
  grid-auto-rows: 100px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: row dense;
}

This grid has four columns, all equally sized, and uses automatically generated rows of 100px height. The grid-auto-flow property is set to dense to fill gaps and rows, so it fills rows first.

But we can rewrite this with the grid attribute to the following:

.grid {  display: grid;
  grid: auto-flow dense 100px / repeat(4, 1fr);
}

The rewritten code is noticeably shorter than the first. Less code means we don’t have to send as many bytes over the wire, making requests and rendering faster, and we can see what the grid looks like at a glance.

The shortcut syntax isn’t as self-explanatory as the expanded syntax, but it can save us valuable time once it’s in our muscle memory.

The grid-template attribute

If we want to use both grid-template-rows and grid-template-columns and combine these into a single attribute, we can use grid-template. This attribute allows us to specify each row and column and even grid-template-areas more compactly.

The most basic way to use grid-template is to specify the rows, add a forward slash, and then add the columns. For example, if we want to specify three rows of 150px, 1fr, and 200px, as well as four columns of 1fr each, we could write this as follows:

grid-template: 150px 1fr 200px / repeat(4, 1fr);

Notice how we can use any valid grid-template-rows and grid-template-columns values. We can also mix in grid-template-areas values. For that, we specify the grid areas as rows with their height and add column sizes after a forward slash.

To illustrate how we can leverage this shortcut, let’s have a look at our page example that used grid-template-areas:

.container {  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer"
  ;
  grid-template-rows: 200px 1fr 200px;
  grid-template-columns: 150px 1fr;
}

We can rewrite this using grid-template to the following definition:

.container {  display: grid;
  grid-template:
    "header header" 200px
    "sidebar content" 1fr
    "footer footer" 200px /
    150px 1fr
  ;
}

We have now integrated grid-template-rows and grid-template-columns into the grid-area definition. By adding the height values for each row next to the row, we’re able to tell immediately how tall a given row is. We added the column widths at the end of the grid-template value, separated with a single forward slash.

The grid-row and grid-column attributes

Instead of having four different CSS rules to define the span and placement of an item within a grid, we can arrange it using grid-row and grid-column. Both use the same argument as grid-row-start and grid-row-end, and grid-column-start and grid-column-end, respectively.

So, we’d originally place an element like this:

.item {  grid-row-start: 2; /* Make it begin in the second row */
  grid-row-end: span 3;
  grid-column-start: 4;
  grid-column-end: span 5; /* Make it reach to the ninth
    column */
}

However, we can shorten it to this:

.item {  grid-row: 2 / span 3;
  grid-column: 4 / span 5;
}

We can also use named columns, like so:

.item {  grid-row: navigation / footer;
  grid-column: sidebar / content;
}

Any valid value for the expanded attributes is also valid for the shortcuts.

The gap attribute

Last but not least, there is a shortcut for gap definitions called gap. Instead of using row-gap and column-gap, we can either use gaps with a single value to denote a valid size for both row and column gaps or specify row gaps and column gaps separately with two different values, much like padding and margin.

Let’s assume we have the following grid definition with row gaps and column gaps:

.grid {  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer"
  ;
  row-gap: 15px;
  column-gap: 30px;
}

We can then use the gap attribute to shorten the code, like so:

.grid {  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer"
  ;
  gap: 15px 30px;
}

If we used the same values for row-gap and column-gap, we could even shorten the gap value to a single value, much like margin and padding.

Shortcuts help us to reduce the verbosity of our code. They can help us to be less repetitive and communicate our grid with more clarity. Some of these shortcuts, especially grid, might need more effort to write but can save us much time once we’re familiar with them. Using them isn’t mandatory, either. Some developers prefer shortcuts; some don’t.