CSS grid-template

The CSS grid-template property is used to define the size of grid items based on rows and columns or areas, in grid layout. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {display: grid; gap: 4px; background-color: peru; color: whitesmoke;
         grid-template: 120px 150px / auto auto auto;}
      .container > div {background-color: maroon; padding: 10px; text-align: center;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
   </div>
   
</body>
</html>

Output

Note - The grid as the value of display property, is used to make an element as a block level grid container.

Note - The gap property is used to define the gap between rows and columns in grid layout.

CSS grid-template Syntax

The syntax of grid-template property in CSS, is:

grid-template: grid-template-rows / grid-template-columns|grid-template-areas;

Therefore, the grid-template property is used to set following CSS properties, at once:

grid-template-rows - used to define the height of a/multiple row(s) in grid layout
grid-template-columns - used to define the number of columns to create in grid layout
grid-template-areas - used to define the area of a/multiple grid item(s) in grid layout

Note - We can also use none as grid-template-rows to define no particular size. The none is the default value here.

Note - The initial or inherit as the value of grid-template-columns or grid-template-areas is used to use the default value or inherit and use the value from its parent element.

grid-template: grid-template-rows / grid-template-columns Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {display: grid; gap: 4px; background-color: peru; color: whitesmoke;
         grid-template: 200px 260px / auto auto;}
      .container > div {background-color: maroon; padding: 10px; text-align: center;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
   </div>
   
</body>
</html>

Output

grid-template: grid-template-areas Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {display: grid; gap: 4px; background-color: peru; color: whitesmoke;
         grid-template: 'myarea myarea .' 'myarea myarea .';}
      .container > div {background-color: maroon; padding: 10px; text-align: center;}
      #one {grid-area: myarea;}
   </style>
</head>
<body>

   <div class="container">
      <div id="one">A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
   </div>
   
</body>
</html>

Output

Note - The grid-area property is used to define the location and size of a grid item.

CSS grid-template Example

This is the last example of grid-template property in CSS:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {display: grid; gap: 4px; background-color: peru; color: whitesmoke;
         grid-template: 'head head head' '. . . ' 'foot foot foot';}
      .container > div {background-color: maroon; padding: 10px; text-align: center;}
      #header {grid-area: head;}
      #footer {grid-area: foot;}
   </style>
</head>
<body>

   <div class="container">
      <div id="header">A</div>
      <div>B</div>
      <div>
         Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolores, delectus ipsa? 
         Temporibus excepturi laboriosam eveniet, commodi inventore impedit. Repellat deserunt 
         nobis, placeat voluptate quas accusantium sequi modi maiores, explicabo esse veritatis
         perspiciatis assumenda, nemo necessitatibus repudiandae possimus facilis doloremque
         voluptatibus iure aperiam expedita. Incidunt ullam id voluptate blanditiis et nisi qui
         ipsa ratione, culpa ut at nulla laborum. Delectus omnis at sapiente assumenda?
      </div>
      <div>D</div>
      <div id="footer">E</div>
   </div>
   
</body>
</html>

Output

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolores, delectus ipsa? Temporibus excepturi laboriosam eveniet, commodi inventore impedit. Repellat deserunt nobis, placeat voluptate quas accusantium sequi modi maiores, explicabo esse veritatis perspiciatis assumenda, nemo necessitatibus repudiandae possimus facilis doloremque voluptatibus iure aperiam expedita. Incidunt ullam id voluptate blanditiis et nisi qui ipsa ratione, culpa ut at nulla laborum. Delectus omnis at sapiente assumenda?

CSS Online Test

« Previous Tutorial Next Tutorial »