CSS | grid-template-areas Property

The grid-template-areas property in CSS is used to specify the area within the grid layout. The named grid area can be rendered on the screen based on the sequence of values of the grid-template-areas property.

Syntax:

grid-template-areas: none|itemnames;

Property Values:

  • none: It is the default value and it does not contains grid named areas.
  • itemnames: It is the sequence of grid area names in the form of row and columns.

Note:

  • Each area name is separated by a space.
  • Each row is contained within single quote ‘ ‘.
  • There is a semicolon at the end of the declaration only.
  • Period represents items with no names.

Example 1: This example display the grid-template-areas property.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title
            CSS grid-template-areas Property 
        </title
          
        <style
            .GFG1 {
                grid-area: area;
            }
            .geeks { 
                background-color:green; 
                padding:30px; 
                display: grid; 
                grid-template-areas: 'area area';
                grid-gap: 20px; 
            
            .GFG { 
                background-color: white; 
                font-size: 30px; 
                text-align: center; 
            
        </style
    </head
      
    <body
        <div class="geeks"
            <div class="GFG GFG1">A</div
            <div class="GFG">B</div
            <div class="GFG">C</div
            <div class="GFG">D</div
            <div class="GFG">E</div
            <div class="GFG">F</div
            <div class="GFG">G</div
            <div class="GFG">H</div
        </div
    </body
</html>                     

chevron_right


Output:
CSS grid-template-areas-example1

Example 2: This example display the grid-template-areas property.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title
            CSS grid-template-areas Property 
        </title
          
        <style
            .GFG1 {
                grid-area: area;
            }
            .geeks { 
                background-color:green; 
                padding:30px; 
                display: grid; 
                grid-template-areas:
                'area area . . .'
                'area area . . .';
                grid-gap: 20px; 
            
            .GFG { 
                background-color: white; 
                font-size: 30px; 
                text-align: center; 
            
        </style
    </head
      
    <body
        <div class="geeks"
            <div class="GFG GFG1">A</div
            <div class="GFG">B</div
            <div class="GFG">C</div
            <div class="GFG">D</div
            <div class="GFG">E</div
            <div class="GFG">F</div
            <div class="GFG">G</div
        </div
    </body
</html>                     

chevron_right


Output:
CSS grid-template-areas-example2

Supported Browsers: The browser supported by grid-template-areas 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


Article Tags :

Be the First to upvote.


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