CSS | grid-area Property - GeeksforGeeks

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
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Convert a string to an integer in JavaScript