CSS grid-template-areas Property

Grid is a layout system that uses a grid with rows and columns.

The grid-template-areas property defines named grid areas.

The value is a sequence of names that define rows and columns.

Example

#

A grid layout with 5 named grid areas.

Header
Menu
Main
Right
Footer
<style>
  .grid-template {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-areas:
      'header header header header header header'
      'menu main main main right right'
      'menu footer footer footer footer footer';
  }

  .grid-template > div {
    background-color: aliceblue;
    text-align: center;
    padding: 25px 5px;
    font-size: 18px;
  }
</style>

<div class="grid-template">
  <div style="grid-area: header">Header</div>
  <div style="grid-area: menu">Menu</div>
  <div style="grid-area: main">Main</div>
  <div style="grid-area: right">Right</div>
  <div style="grid-area: footer">Footer</div>
</div>

Syntax

grid-template-areas: none | areanames;

Values

#

Value Description
none Default. No grid area names.
areanames A sequence of names that specify how rows and columns are formed.

Browser support

This table shows when grid-template-areas support started for each browser.

Chrome
57 Mar 2017
Firefox
52 Mar 2017
IE/Edge
16 Sep 2017
Opera
44 Mar 2017
Safari
10 Sep 2016

You may also like

Guides