CSS grid-template Property

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.

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

Initial Value none none none
Applies to Grid containers.
Inherited No.
Animatable Yes. Grid layout is animatable.
Version CSS Grid Layout Module Level 1
DOM Syntax object.style.gridTemplate ="100px / auto auto";

Syntax

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

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>

In the following example, "item1" name is given to the grid item:

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>

Values

Value Description
none No size will be defined. This is the default value of this property.
grid-template-rows / grid-template-columns Specifies the size of the rows and columns.
grid-template-areas Specifies the grid layout using named items.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

57.0+ 16.0+ 52.0+ 10.1+ 44.0+

Practice Your Knowledge

The grid-template is a shorthand property for the following properties, except:




Related articles