W3docs
en
Log in

CSS grid-template Property

Use the grid-template CSS property to define grid columns, rows and areas. See property values with examples, try it yourself.

The grid-template property defines the grid columns, rows and areas. It is a shorthand property for the following properties:

The grid-template property sets the rows and columns, separated by a forward slash.

Info

The grid-template property does not affect any gutters (gap) cascading down.

The CSS grid shorthand property resets other grid properties (like grid-auto-rows and grid-gap) to their initial values. If you want to set only rows, columns, and areas without affecting other grid properties, use grid-template instead of grid.

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

Syntax

CSS grid-template syntax

grid-template: none | [ <grid-template-rows> / <grid-template-columns> ] | <grid-template-areas> | initial | inherit;

Example of the grid-template property:

CSS grid-template code example

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

Result

CSS grid-template another

Example of the grid-template property, where "item1" name is given to a grid item:

CSS grid-template another code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        grid-area: item1;
      }
      .grid-container {
        display: grid;
        grid-template: 'item1 item1 . .' 'item1 item1 . .';
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template property example</h2>
    <div class="grid-container">
      <div class="box">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>
Try it Yourself »

Values

ValueDescriptionPlay it
noneNo size will be defined. This is the default value of this property.-
grid-template-rows / grid-template-columnsSpecifies the size of the rows and columns.Play it »
grid-template-areasSpecifies the grid layout using named items. Syntax: <string>+Play it »
initialMakes the property use its default value.-
inheritInherits the property from its parent element.-

Practice

Practice

What does the 'grid-template' property in CSS stand for?