Open In App

CSS grid-template Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The grid-template property in CSS is a shorthand property for defining grid columns, rows and areas.The user can set the values for the following longhand properties: 
 

Syntax: 
 

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

Property Values: 
 

  • none: The user can set the sizing of rows and columns to default value by using “none”.
    Example 
     

html




<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | grid-template Property
    </title>
    <style>
        .main {
            display: grid;
            grid-template: none;
            grid-gap: 10px;
            background-color: green;
            padding: 10px;
        }
          
        .main > div {
            background-color: white;
            text-align: center;
            padding: 15px 0;
            font-size: 30px;
        }
    </style>
</head>
  
<body>
    <div class="main">
        <div class="item1">G</div>
        <div class="item2">E</div>
        <div class="item3">E</div>
        <div class="item4">K</div>
    </div>
</body>
  
</html>


Output: 
 


 

  • grid-template-rows/grid-template-columns: This property value is used to specify size of rows and columns measured in px, cm etc. If the user wants the row or column size to remain default then set that row or column to “auto”.
    Example: 
     

html




<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | grid-template Property
    </title>
    <style>
        .main {
            display: grid;
            grid-template: 50px 100px/150px auto;
            grid-gap: 10px;
            background-color: green;
            padding: 10px;
        }
          
        .main > div {
            background-color: white;
            text-align: center;
            padding: 15px 0;
            font-size: 30px;
        }
    </style>
</head>
  
<body>
    <div class="main">
        <div class="item1">G</div>
        <div class="item2">E</div>
        <div class="item3">E</div>
        <div class="item4">K</div>
    </div>
</body>
  
</html>


Output: 
 


 

  • grid-template-areas: This property value specifies areas within the grid layout. grid-area property is used to name the grid items and then reference them using grid-template-areas.
    Example: 
     

html




<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | grid-template Property
    </title>
    <style>
        .item1 {
            grid-area: item1;
        }
          
        .item2 {
            grid-area: item2;
        }
          
        .item3 {
            grid-area: item3;
        }
          
        .item4 {
            grid-area: item4;
        }
          
        .main {
            display: grid;
            grid-template: 'item1 item1 item1' 
                           'item2 item3 item4';
            grid-gap: 10px;
            background-color: green;
            padding: 10px;
        }
          
        .main > div {
            background-color: white;
            text-align: center;
            padding: 15px 0;
            font-size: 30px;
        }
    </style>
</head>
  
<body>
    <div class="main">
        <div class="item1">G</div>
        <div class="item2">E</div>
        <div class="item3">E</div>
        <div class="item4">K</div>
    </div>
</body>
  
</html>


Output: 
 


 

  • initial: This property value will set the property to its default value.
    Example: 
     

html




<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | grid-template Property
    </title>
    <style>
        .main {
            display: grid;
            grid-template: initial;
            alignnone grid-gap: 10px;
            background-color: green;
            padding: 10px;
        }
          
        .main > div {
            background-color: white;
            text-align: center;
            padding: 15px 0;
            font-size: 30px;
        }
    </style>
</head>
  
<body>
    <div class="main">
        <div class="item1">G</div>
        <div class="item2">E</div>
        <div class="item3">E</div>
        <div class="item4">K</div>
    </div>
</body>
  
</html>


Output: 
 


 

  • inherit: This will inherit this property from its parent element.
    Example: 
     

html




<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | grid-template Property
    </title>
    <style>
        .main {
            display: grid;
            grid-template: inherit;
            grid-gap: 10px;
            background-color: green;
            padding: 10px;
        }
          
        .main > div {
            background-color: white;
            text-align: center;
            padding: 15px 0;
            font-size: 30px;
        }
          
        alignnone
    </style>
</head>
  
<body>
    <div class="main">
        <div class="item1">G</div>
        <div class="item2">E</div>
        <div class="item3">E</div>
        <div class="item4">K</div>
    </div>
</body>
  
</html>


Output: 
 

Supported Browsers: The browser supported by CSS grid-template Property are listed below: 

  • Google Chrome 57.0
  • Edge 16
  • Firefox 52.0
  • Safari 10.1
  • Opera 44.0


Last Updated : 05 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads