Related Articles

Related Articles

CSS | Grid Layout Module
  • Difficulty Level : Medium
  • Last Updated : 12 Jul, 2019

The CSS grid layout module is used to create grid-based layout system, with the help of rows and columns it make easier to design any webpage without using floats and positioning.

syntax:

.class {
    display:grid;
}

Note: An HTML element becomes a grid if that element sets display:grid; in style section or inline-grid. Below you will see both the example.

Example 1: This example illustrates the use of display:grid; property.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
  
         /* Designing all grid */
         .grid-container {
            display: grid;
            grid-template-columns: auto auto auto;
            background-color: gray;
            padding: 5px;
        }
  
        /* Designing all grid-items */
        .grid-item {
            background-color: rgba(255, 255, 255, 0.8);
            border: 1px solid black;
            padding: 20px;
            font-size: 30px;
            text-align: center;
        
  
        /* Designing h1 element */
        h1 {
            color: green;
            text-align: center;
    </style>
</head>
  
<body>
  
    <h1>GeeksforGeeks</h1>
  
    <!-- Creating grid -->
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
    </div>
  
</body>
  
</html>

chevron_right


Output:



Example 2: This example illustrates the use of display:inline-grid; property.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
          
        /* Designing all grid */
        .grid-container {
            display: inline-grid;
            grid-template-columns: auto auto auto;
            background-color: gray;
            padding: 5px;
        }
  
        /* Designing all grid-items */
        .grid-item {
            background-color: rgba(255, 255, 255, 0.8);
            border: 1px solid black;
            padding: 20px;
            font-size: 30px;
        }  
          
        /* Designing h1 element */
        h1 {
            color: green;
            text-align: center;
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
          
        <!-- Creating grids -->
        <div class="grid-container">
            <div class="grid-item">1</div>
            <div class="grid-item">2</div>
            <div class="grid-item">3</div>
            <div class="grid-item">4</div>
            <div class="grid-item">5</div>
            <div class="grid-item">6</div>
            <div class="grid-item">7</div>
            <div class="grid-item">8</div>
            <div class="grid-item">9</div>
        </div>
    </center>
</body>
  
</html>                    

chevron_right


Output:

You can control the following things on a Grid system

  • grid-column-gap
  • grid-row-gap
  • grid-gap

Example 3: In the below code we used both grid-column-gap and grid-row-gap together.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
  
          /* Designing all grid */
         .grid-container {
            display: grid;
            grid-template-columns: auto auto auto;
            background-color: gray;
            grid-column-gap: 50px;
            grid-row-gap: 50px;
            padding: 5px;
        }
  
        /* Designing all grid-items */
        .grid-item {
            background-color: rgba(255, 255, 255, 0.8);
            border: 1px solid black;
            padding: 20px;
            font-size: 30px;
            text-align: center;
        }
  
        /* Designing h1 element */
        h1 {
            color: green;
            text-align: center;
    </style>
</head>
  
<body>
  
    <h1>GeeksforGeeks</h1>
  
    <!-- Creating grids -->
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
    </div>
  
</body>
  
</html>

chevron_right


Output:

Note: Similarly grid-gap also work.

You can control the following things on a Grid system

  • grid-column-lines
  • grid-row-lines

Example:4 In the below code we used both grid-column-lines and grid-row-lines together.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
  
        /* Designing all grid */
        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-gap: 10px;
            background-color: gray;
            padding: 10px;
        }
  
        /* Designing all grid-items */
        .grid-container > div {
            background-color: rgba(255, 255, 255, 0.8);
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
        }
  
        /* Grid Column */
        .item1 {
            grid-column-start: 1;
            grid-column-end: 3;
        }
  
        /* Grid row */
        .item3 {
            grid-row-start: 2;
            grid-row-end: 5;
        }
  
        /* Designing h1 element */
        h1 {
            color: green;
            text-align: center;
        }
    </style>
</head>
  
<body>
  
    <h1>GeeksforGeeks</h1>
  
    <!-- Creating grids -->
    <div class="grid-container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
        <div class="item6">6</div>
        <div class="item7">7</div>
        <div class="item8">8</div>
    </div>
  
</body>
  
</html>
         

chevron_right


Output:

Supported Browsers: The browser supported by CSS Grid Layout Module are listed below:

  • Google Chrome 57.0
  • Internet Explorer 16.0
  • Firefox 52.0
  • Safari 10.0
  • Opera 44.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :