CSS | grid-template Property

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <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>

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <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>

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <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>

    chevron_right

    
    

    Output:

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

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <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>

    chevron_right

    
    

    Output:

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

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <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>

    chevron_right

    
    

    Output:

    Supported Browsers: The browser supported by CSS grid-row-gap 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

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




    Article Tags :

    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.