Skip to content
Related Articles

Related Articles

Improve Article

CSS | grid-area Property

  • Last Updated : 08 Aug, 2019

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:




<!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:




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



My Personal Notes arrow_drop_up
Recommended Articles
Page :