CSS Grid Layout: Grid Areas

With CSS Grid Layout, the default way to place items on their containing grid is by specifying the lines where they start and end. Grid areas are an alternative to providing lines and offer a way to name grid areas so that items can easily fit into these named areas. It may seem a bit confusing at first, but the power of grid areas quickly becomes evident.

The demos should still work on non-supporting browsers, thanks to this Grid polyfill.

Named areas with grid-area

First you define names of your choice on grid items with the grid-area property:

.item-1 {
  grid-area: head;
}
.item-2 {
  grid-area: main;
}
.item-3 {
  grid-area: side;
}
.item-4 {
  grid-area: footer;
}

Describing the layout with grid-template-areas

Then, on the grid container, you use the grid-template-areas property to define how the named areas get applied:

.container {
  display: grid;

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

  grid-template-areas:
    "head head . side"
    "main main . side"
    "footer footer footer footer";
}

Defining the value for grid-template-areas lets you use ascii art. Each section in quotes is a row and each word represents a column. A . is for an empty grid cell, and it can actually be as many consecutive . characters (i.e: ….). Spaces are not relevant and you can play around with the format. Here for example is an equivalent to the above snippet:

.container {
  /* ... */

  grid-template-areas:
    "head head     .....    side"
    "main main     .....    side"
    "footer footer footer footer";
}

And the following is the result:

Head
Main
Side
Footer

Now let’s play around with the grid-template-areas value to get something completely different, all without having to touch any of the properties on the grid items. The following example may be a bit too Art Deco for your taste, but it illustrates the power:

.container {
  /* ... */

  grid-template-areas:
    "head head  .    side"
    "main main main  side"
    ". footer footer side";

  /* ... */
}
Head
Main
Side
Footer

Grid areas with media queries

The full power of grid areas is unleashed when coupled with media queries. Fully responsive layouts can be achieved with a simple change to a single property:

@media screen and (max-width: 40em) {
  .container {
    grid-template-areas:
      "head head head head"
      "main main main main"
      "side side side side"
      "footer footer footer footer";
  }
}

Notice how we change the order of elements without having to touch the source order. On this responsive version we also added a new implicit row that will have a height of auto. CSS Grid takes care of creating the new row for us even if we didn’t define that extra row in our grid-template-rows property.

If you’re on a desktop computer, resize your browser to see the result in action. If you’re on a mobile device, you should already see it:

Head
Main
Side
Footer
  Tweet It
✖ Clear

🕵 Search Results

🔎 Searching...