W3docs
en
Log in

CSS grid Property

The grid CSS property is a shorthand property for the other grid properties. See the values of the grid property and try some examples.

The grid CSS property is a shorthand property for the following properties:

You can specify either explicit grid properties (grid-template-rows, grid-template-columns, grid-template-areas) or implicit grid properties (grid-auto-rows, grid-auto-columns, grid-auto-flow) in a single grid declaration. The shorthand maps these sub-properties directly, and any omitted sub-properties are reset to their initial values.

Initial Valuenone
Applies toGrid containers.
InheritedNo.
AnimatableYes. Grid layout is animatable.
VersionCSS Grid Layout Module Level 1
DOM SyntaxObject.style.grid = "150px / auto auto auto";

Syntax

Syntax of CSS grid Property

grid: none | <grid-template-rows> / <grid-template-columns> | <grid-template-areas> | <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>? | [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns> | initial | inherit;

Example 1: Basic grid shorthand

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid: 100px / auto auto auto;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-box {
        background-color: #eee;
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 30px;
        font-size: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box">1</div>
      <div class="grid-box">2</div>
      <div class="grid-box">3</div>
      <div class="grid-box">4</div>
      <div class="grid-box">5</div>
      <div class="grid-box">6</div>
      <div class="grid-box">7</div>
      <div class="grid-box">8</div>
      <div class="grid-box">9</div>
    </div>
  </body>
</html>
Try it Yourself »

Example 2: Grid shorthand with auto-flow

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid: auto auto / auto-flow column auto auto auto;
        gap: 5px;
        background-color: #1c87c9;
        padding: 10px;
      }
      .grid-container > div {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box1">1</div>
      <div class="grid-box2">2</div>
      <div class="grid-box3">3</div>
      <div class="grid-box4">4</div>
    </div>
  </body>
</html>
Try it Yourself »

Result

CSS grid Property

Example 3: Grid shorthand with fixed row sizes

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .grid-box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .grid-box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .grid-box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .grid-box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .grid-box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .grid-container {
        display: grid;
        grid: 100px / auto auto auto;
        gap: 10px;
        background-color: #1c87c9;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box1">1</div>
      <div class="grid-box2">2</div>
      <div class="grid-box3">3</div>
      <div class="grid-box4">4</div>
      <div class="grid-box5">5</div>
      <div class="grid-box6">6</div>
    </div>
  </body>
</html>
Try it Yourself »

Values

ValueDescriptionPlay it
noneThe size of the columns and rows is not specified. This is the default value.
grid-template-rows / grid-template-columnsSpecifies the size of the rows and columns.Play it »
grid-template-areasSpecifies the grid layout using named grid areas.Play it »
grid-template-rows / [auto-flow && dense?] grid-auto-columnsSets row sizes, and specifies auto-flow and dense placement for columns.
[auto-flow && dense?] grid-auto-rows / grid-template-columnsSets column sizes, and specifies auto-flow and dense placement for rows.
initialResets the property to its default value.
inheritInherits the property from the parent element.

Practice

Practice

What can you achieve using CSS Grid Layout according to the content on the page?