Skip to content
Related Articles

Related Articles

Improve Article

CSS | grid-template Property

  • Last Updated : 06 Apr, 2021

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
    • Internet Explorer 16.0
    • Firefox 52.0
    • Safari 10.0
    • Opera 44.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :