CSS grid-template Property

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

A grid-template defines rows, columns, and areas in a grid layout.

It's a shorthand for 3 properties that define rows, columns, and areas.

Example

#

Item 2 is defined as a grid area spanning 2 rows and 3 columns.

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
  .grid-container {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template:
      '. area2 area2 . . .'
      '. area2 area2 . . .'
      '. area2 area2 . . .';
  }

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

<div class="grid-container">
  <div>1</div>

  <div style="grid-area: area2;
              color: white;
              background-color: salmon;">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
</div> 

Using grid-template

A grid is like a table but with responsive layouts and easier CSS styling.

The grid-template property is a shorthand for:

Syntax

grid-template: none | grid-template-rows / grid-template-columns | 
               grid-template-areas | initial | inherit;

Values

#

Value Description
none Default. Rows and columns are not positioned or resized.
grid-template-rows Sets the rows positioning and sizes
grid-template-columns Sets the columns positioning and sizes
grid-template-areas Defines area positioning and sizes
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

A grid-template that defines 5 named 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>

A calculator grid layout.
Item 0 is defined as a grid area with 2 rows and 2 columns.

0
7
8
9
4
5
6
1
2
3
.
=
<style>
  .grid-container-example {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid: '. . . zero zero' '. . . zero zero';
  }

  .grid-container-example > div {
    background-color: aliceblue;
    text-align: center;
    padding: 10px;
    font-size: 24px;
  }
</style>

<div class="grid-container-example">
  <div style="grid-area: zero">0</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>.</div>
  <div>=</div>
</div>

Browser support

This table shows when grid-template 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