The Text Visualization of Template Areas in CSS Grid

A straight forward and awesome way to visualize your grid areas in text.

As CSS Grid started to roll out I was eager to play with it and one thing i found really nice was the “visualization” in text when you write out your grid-template-areas . Here’s an example of how the CSS maps really nice with the actual grid through 3 media queries.

The grid on small screens.

Overall grid rulset

First of I use some basic CSS rules which looks like this.

.grid {
  display: grid;
  grid-gap: 1.5vw;
  min-height: 100vh;
  padding: 1.5vw;
}

It doesn't do anything special, just turn on the grid. Add some spacing and make sure it’s atleast as high as the viewport.

Small Screen

Before any media queries, since we’re building mobile first, I add some more rules to the .grid selector.

.grid {
  ...previous rules...
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 50vh 30vh repeat(7, minmax(20vh, 1fr));

The first rule grid-template-columns: repeat(2, 1fr); adds 5 columns of equal with. I’m using 1fr instead of % or any other value since it’s doing calculations for grid-gap and padding right out of the box.

Second rule tells the grid how many rows there’s going to be. This one is pretty straight forward.

Small Screen Template Areas

Here comes the nice part! See how the rules below 👇 matches the boxes (!) on the screenshot to the left 👈 ( above ☝ on small screens). ️

.grid {
  grid-template-areas:
    "hero   hero"
    "big1   big1"
    "med1   med1"
    "med2   med2"
    "small1 small2"
    "small3 small4"
    "small5 small6"
    "small7 small8"
    "small9 small10";
}

Medium Screen Template Areas

As the screen grows we add a media query with new rules for columns and rows as well as template areas.

@media screen and (min-width: 750px) {
  .grid {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 25vh);
    grid-template-areas:
      "hero   hero   hero   med1   med1"
      "hero   hero   hero   med2   med2"
      "big1   big1   big1   big1   big1"
      "small1 small2 small3 small4 small5"
      "small6 small7 small8 small9 small10";
  }
}

Really simple, bump up the columns to 5 of equal width and make 5 rows with a height of 25% of the viewport height. So now we get this bad boy.

The grid on medium screens.

Bigger Screen Template Areas

From 1400 pixels we get lots of space to bump up the grid to something special. Let’s add some rules for that.

@media screen and (min-width: 1400px) {
  .grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
    "small1 hero   hero hero med1   med1"
    "small2 hero   hero hero med2   med2"
    "small3 small5 big1 big1 small7 small8"
    "small4 small6 big1 big1 small9 small10";
  }
}

The grid on big screens.

Here the mapping of the rules in CSS and the grid on the screenshot 👆 really maps out nicely 😍.

The rest of the CSS and HTML

Below our previous grid rules and media queries we add some more CSS to be able to put each HTML element in their respective grid-template-areas section.

.grid .item:nth-child(1)  { grid-area: hero; }
.grid .item:nth-child(2)  { grid-area: big1; }
.grid .item:nth-child(3)  { grid-area: med1; }
.grid .item:nth-child(4)  { grid-area: med2; }
.grid .item:nth-child(5)  { grid-area: small1; }
.grid .item:nth-child(6)  { grid-area: small2; }
.grid .item:nth-child(7)  { grid-area: small3; }
.grid .item:nth-child(8)  { grid-area: small4; }
.grid .item:nth-child(9)  { grid-area: small5; }
.grid .item:nth-child(10) { grid-area: small6; }
.grid .item:nth-child(11) { grid-area: small7; }
.grid .item:nth-child(12) { grid-area: small8; }
.grid .item:nth-child(13) { grid-area: small9; }
.grid .item:nth-child(14) { grid-area: small10; }

And the HTML for that looks like this. Very basic 😎.

<div class="grid ">
  ...
  <div class="item">
    ...
  </div>
</div>

I’ve published all code for this at codepen.io which also include a flexbox fallback.

That’s all 👋.