CSS grid - grid-template Property

CSS grid-template is a shorthand property that specifies the grid columns, grid rows and grid areas.

The grid-template property is a shorthand for the following individual grid-related properties:

Possible Values

You can't use the repeat() function in these track listings because the tracks must match the rows and columns in "ASCII art" exactly.
The grid shorthand property works same as the grid-template property and resets implicit grid properties to their default values. You can use grid instead of grid-template to avoid separate cascading of these values.

Applies to

Grid containers.

DOM Syntax

object.style.gridTemplate = "none|<grid-template-rows> / <grid-template-columns>|[ <line-names>? <string> <track-size>? <line-names>? ]+ [ /<explicit-track-list> ]?";

CSS grid-template - none Value

The following example demonstartes that grid-template: none property automatically arranges the rows and columns based on the content −

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template: none;
      color: white;
      text-align: center;
      width: 360px;
      background-color: lightgreen;
   }
   .grid-container > div {
      background-color: red;
      border: 2px solid lightgreen;
      padding: 5px;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div>Grid item 1</div>
      <div>Grid item 2</div>
      <div>Grid item 3</div>
      <div>Grid item 4</div>
   </div>
</body>
</html>

CSS grid-template - <grid-template-rows> / <grid-template-columns>

The following example demonstrates the grid layout with two rows with heights of 100px and 50px and two columns with widths of 150px and 300px.

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template: 100px 50px / 150px 300px;
      color: white;
      text-align: center;
      background-color: lightgreen;
   }
   .grid-container > div {
      background-color: red;
      border: 2px solid lightgreen;
      padding: 5px;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div>Grid item 1</div>
      <div>Grid item 2</div>
      <div>Grid item 3</div>
      <div>Grid item 4</div>
   </div>
</body>
</html>

CSS grid-template - Template Design

The following example demonstartes a responsive and structured web page layout. The grid layout contains navbar, left and right sections, and a footer −

<html>
<head>
<style>
   .navbar {
      background-color: lightgreen;
      grid-area: nav;
   }
   .left {
      background-color: pink;
      grid-area: left;
   }
   .right {
      background-color: violet;
      grid-area: right;
   }
   .footer {
      background-color: lightgreen;
      grid-area: footer;
   }
   .grid-box {
      display: grid;
      width: 100%;
      height: 300px;
      grid-template:
         "nav nav" 40px 
         "right left" 200px
         "footer footer" 40px;
      padding: 5px;
   }
</style>
</head>
<body>
   <div class="grid-box">
      <div class="navbar">Navbar</div>
      <div class="left">Left Section</div>
      <div class="right">Right Section</div>
      <div class="footer">Footer</div>
   </div>
</body>
</html>

CSS grid-template - Related Properties

Following is the list of CSS properties related to grid-template property:

property value
grid-template-columns Specifies the names of grid lines and functions that determine the size of the grid columns.
grid-template-rows Specifies the names of grid lines and functions that determine the size of the grid rows.
grid-template-area specifies the names of grid lines and functions that determine the size of the grid areas.
Advertisements