Open In App

CSS grid-area Property

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

The grid-area property is used to set a grid item size and location in a grid layout. The grid-area property is also used to set a name to a grid item. 

Syntax:

grid-area: grid-row-start|grid-column-start|grid-row-end|
grid-column-end|itemname;

Property Values:

  • grid-row-start: It sets the row on which the item is displayed first.
  • grid-column-start: It sets the column on which the item is displayed first.
  • grid-row-end: It specifies the row-line to stop displaying the item, or span how many rows.
  • grid-column-end: It sets the number of columns to span.
  • itemname: It sets a name for the grid item.

Example 1: 

html




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | grid-area Property
    </title>
    <style>
        .item {
            grid-area: Area;
        }
        .grid-container {
            display: grid;
            grid-template-areas: 'Area Area Area';
            grid-gap: 30px;
            background-color: green;
            padding: 20px;
        }
        .GFG {
            background-color: white;
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>The grid-area Property</h2>
      
    <div class = "grid-container">
        <div class = "GFG item">1</div>
        <div class = "GFG">2</div>
        <div class = "GFG">3</div>
        <div class = "GFG">4</div>
        <div class = "GFG">5</div>
        <div class = "GFG">6</div>
    </div>
</body>
</html>                    


Output:

  

Example 2: 

html




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS grid-area property
    </title>
      
    <style>
        .GFG1 { 
            grid-area: heading; 
        }
        .GFG2 {
            grid-area: margin; 
        }
        .GFG3 { 
            grid-area: subtitle1; 
        }
        .GFG4 { 
            grid-area: info; 
        }
        .main {
            display: grid;
            grid-gap: 30px;
            background-color: green;
            padding: 20px;
            grid-template-areas:
            'margin heading heading heading heading heading '
            'margin subtitle1 info info info info';
        }
        .GFG {
            background-color: white;
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>CSS grid-area Property</h2>
      
    <div class = "main">
        <div class = "GFG GFG1">Heading</div>
        <div class = "GFG GFG2">Margin</div>
        <div class = "GFG GFG3">Subtitle</div>
        <div class = "GFG GFG4">info</div>
    </div>
  
</body>
</html>                    


Output:

  

Supported Browsers: The browsers supported by grid-area property are listed below:

  • Google Chrome 57.0
  • Edge 16.0
  • Mozilla Firefox 52.0
  • Safari 10.1
  • Opera 44.0


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