CSS | grid Property

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.

Example 1: Grid with 2-rows and 4-column.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <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>

chevron_right


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.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.