CSS grid Property

The grid property defines a grid layout.

It specifies rows, columns, and areas by name and position.

This property is a shorthand for several grid settings.

Example

#

A grid layout with 5 named grid areas.

Header
Menu
Main
Right
Footer
<style>
  .grid-template {
    padding: 10px;
    background-color: steelblue;
    display: grid;
    grid-gap: 10px;
    grid: '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>

Using grid

The grid property is a shorthand for these properties:

Syntax

grid: none | 
      grid-template-rows / grid-template-columns |
      grid-template-areas |
      grid-template-rows / [grid-auto-flow] grid-auto-columns |
      [grid-auto-flow] grid-auto-rows / grid-template-columns |
      initial | inherit;

Values

#

Value Description
none Default. No sizing specified for rows and columns.
grid-template-rows /
grid-template-columns
Sets row and column sizes.
grid-template-areas Sets named grid areas.
grid-template-rows /
grid-auto-columns
Sets rows heights and auto-sizes columns.
grid-auto-rows /
grid-template-columns
Auto sizes rows and sets column heights.
grid-template-rows /
grid-auto-flow
grid-auto-columns
Sets rows heights, item placements, and auto-sizes columns.
grid-auto-flow
grid-auto-rows /
grid-template-columns
Sets item placements, auto-sizes rows and column heights.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

A calculator grid layout.
Item 0 is grid area covering 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 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