#1

Naming CSS Grid Rows and Columns

2019-08-11

TAGS: csscss grid

I usually name my CSS Grid areas so I can reference them easily. If I want to name columns I usually do it like this.

.container {
  display: grid;
  grid-template-columns: 3fr 4fr;
  grid-areas: "sidebar content";
}

Turns out there’s a great shorthand if you want to name an entire column or row. You can name your CSS Grid columns and rows like this:

.container {
  display: grid;
  grid-template-columns: [sidebar] 3fr [content] 4fr;
}

Not only does it save you some lines of code, but you get the name right next to the size for easy reference.


Learned it from this article.