CSS | grid Property - GeeksforGeeks

08 Aug, 2019
It is a CSS property that offers a grid-based layout system, with rows and columns, making it easier to design web pages without floats and positioning.
Syntax:
grid: none|grid-template-rows / grid-template-columns|grid-template-areas|
grid-template-rows / [grid-auto-flow] grid-auto-columns|[grid-auto-flow] 
grid-auto-rows / grid-template-columns|initial|inherit;

Property values:
Example 1: Grid with 2-rows and 4-column.
<!DOCTYPE html><html>  <head>    <title>        CSS | grid Property    </title>    <style>        .main {            display: grid;            grid: auto auto / auto auto auto auto;            grid-gap: 10px;            background-color: green;            padding: 10px;        }                  .gfg {            background-color: lightgrey;            text-align: center;            padding: 25px 0;            font-size: 30px;        }    </style></head>  <body>      <h1>Welcome to GFG </h1>    <h3>This tutorial is on CSS grid property</h3>      <div class="main">        <div class="gfg">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 class="gfg">7</div>        <div class="gfg">8</div>    </div>  </body>  </html>
Output :
This can be used as a shorthand property for :
grid-template-rows : Specifies the size of the rows.
grid-template-columns : This specifies the size of the columns.
grid-template-areas : This specifies the grid layout using named items.
grid-auto-rows : This specifies the auto size of the rows.
grid-auto-columns : This specifies the auto size of the columns.
grid-auto-flow : This specifies how to place auto-placed items, and the auto size of the row.
Example 2: This is example for the grid-template-rows and grid-template-columns.
<!DOCTYPE html><html>  <head>    <title>        CSS | grid Property    </title>    <style>        .main {            display: grid;            grid-template-columns: 156px 156px 156px 156px;            grid-template-rows: 100px 200px;            grid-gap: 5px;            background-color: green;            padding: 5px;        }                  .gfg {            background-color: lightgrey;            text-align: center;            padding: 20px 0;            font-size: 30px;        }    </style></head>  <body>    <h1>Welcome to GFG </h1>    <h3>This tutorial is on CSS grid property</h3>      <div class="main">        <div class="gfg">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 class="gfg">7</div>        <div class="gfg">8</div>    </div>  </body>  </html>
Output :Height of the first row is set to 100px and height of the second row is set to 200px and width of every column is set to 156px.
Supported Browsers: The browser supported by CSS | grid Property are listed below:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
CSS-Properties
Picked
Technical Scripter 2018
Web technologies
CSS
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?