---
title: Use Grid Shorthand to Visualize Explicit CSS Grid Tracks
teaser: The CSS grid shorthand property makes it easier to keep track of your track
  sizes and names.
tags: css,design
author: Stephen Lindberg
published_on: 2019-12-09
---

![Illustration of a CSS grid being drawn](https://images.thoughtbot.com/blog-vellum-image-uploads/73yZxm3rTNW0u50J6lQa_gridview_comp2.png)

If you've used CSS grid to set up an explicit grid, that is, [with tracks that
are named and sized explicitly][grid], you may have written some rules like this:

```css
.grid {
  display: grid;
  grid-template-areas:
    'head head'
    'menu main'
    'foot foot';

  grid-template-rows: 100px 1fr 200px;
  grid-template-columns: 200px 1fr;
}

```

I've used this pattern many times out of habit because it was the easiest way
for me to remember and understand the grid setup. What I don't like about this
set of rules, though, is that the track sizes are separate from the grid area
names. This adds a little friction when, say, I want to resize the height of the
`head` section – which size declaration is that again? Oh, right, it's `100px`.

But what if we could combine all these rules into one shorthand rule which
couples all the track sizes with their respective areas? That's exactly what you
can do with the `grid` shorthand rule.

Shorthand properties allow you to set several rules at once. `border` is one
example of a shorthand property, which sets the rules `border-width`,
`border-style`, and `border-color` in that order: `border: 2px solid green`. The
`grid` shorthand allows you to define grid area names and track sizes together.
An added bonus is that the CSS syntax allows formatting which can make
vizualising your grid rules easier.

The syntax for the rule goes something like this:

```css
grid: <row areas> <row size> / <column sizes>
```

with as many pairs of `<row areas> <row size>` as you need.
With some clever wrapping and whitespace, we can align our areas and sizes to
easily visualize the grid:

```css
.grid {
  display: grid;
  grid:
    'head  head' 100px
    'menu  main' 1fr
    'foot  foot' 200px
    /200px 1fr;
}
```

Take note that I've snuck the forward slash in right before the column sizes.
[Now go have fun with it!][codepen]

[grid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#The_implicit_and_explicit_grid
[codepen]: https://codepen.io/lindybot/pen/dyyKOxB