Open In App

CSS grid Property

Last Updated : 02 Apr, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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. 

Try It:

Basic Grid
Dense Grid
Nested Grid
1
2
3
4

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:

ValueDescription
noneIt is default value no specific size mentioned for row and column.
grid-template-rows / grid-template-columnsIt is used to specifies the size of rows and columns.
grid-template-areasIt is used to specifies the grid layout using named items.
grid-template-rows / grid-auto-columnsIt is used to specifies the auto size(height) and sets the auto size columns.
grid-auto-rows / grid-template-columnsIt is used to specifies the auto size and sets the auto grid size columns.
grid-template-rows / grid-auto-flow grid-auto-columnsIt is used to specifies how to place items and auto size row and columns.
grid-auto-flow grid-auto-rows / grid-template-columnsIt is used to specifies how to place items and auto size row and grid-template columns.

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

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

HTML
<!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 57
  • Edge 16
  • Firefox 52
  • Opera 44
  • Safari 10.1


Previous Article
Next Article

Similar Reads

How to make a grid without calling CSS Grid property ?
In this article, we will see how to make a grid without calling CSS Grid property, along with understanding its implementation through the examples. It is essential to understand how CSS grid property works but what if we do not use the CSS grid property to make a grid. This is the generic question asked by the interviewer, which can give you a bet
4 min read
Pure CSS Regular Grid vs Responsive Grid
Pure CSS is a free and open-source CSS framework. It is a collection of tools for creating online programs and responsive web pages. This was developed by Yahoo and is used to make websites that load faster, look better, and are easier to use. Bootstrap is effectively replaced by it. When developing Pure CSS, the responsive design was taken into ac
4 min read
How to use grid element using the grid auto placement rules?
In this article, you will learn to use grid elements using the grid auto-placement rules. You can use auto as a property value on the grid to auto-enable the container to customize its size on the basis of the content of the items in the row or columns. Syntax: grid-template-rows : auto grid-template-columns: auto Property Value: auto : The size of
2 min read
Bootstrap 5 Grid system Grid tiers
Bootstrap Grid system is one of the most versatile layouts which we can use and it has different responsive variants which can be used to add custom responsiveness. Across the six default breakpoints, the grid works smoothly, and all these breakpoints can also be called Grid Tiers which can be changed using the SASS version. For this, we can use th
5 min read
Difference between CSS Grid and CSS Flexbox
Grid:CSS Grid Layout, is a two-dimensional grid-based layout system with rows and columns, making it easier to design web pages without having to use floats and positioning. Like tables, grid layout allow us to align elements into columns and rows. To get started you have to define a container element as a grid with display: grid, set the column an
4 min read
CSS grid-template-columns Property
The grid-template-columns property in CSS is used to set the number of columns and the size of the columns of the grid. This property accepts more than one value. The number of columns is set by the number of values given to this property. Syntax: grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;Property Values: none:
2 min read
CSS grid-row-gap Property
The grid-row-gap property in CSS is used to define the size of the gap between the grid elements. The user can specify the width of the gap separating the rows by providing a value to the grid-row-gap. Syntax: grid-row-gap: length | percentage | global-values;Property Values: length: The user can set the grid-row-gap value to be fixed length measur
2 min read
CSS grid-row Property
The grid-row property in CSS is used to specify the size and location in a grid layout. It is the combination of grid-row-start and grid-row-end property. Syntax: grid-row: grid-row-start|grid-row-end;Property Values: grid-row-start: It is used to specify the row on which to start displaying the item. Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt;h
2 min read
CSS grid-row-end Property
The grid-row-end property in CSS is used to define the grid item's end position within a grid row by specifying the inline edge of its grid area. Syntax: grid-row-end: value; Default Value: auto Property Values: auto: The grid items span for the default value of one row.span int: It specifies the number of rows the item will span.integer: It specif
2 min read
CSS grid-template-rows Property
The grid-template-rows property in CSS is used to set the number of rows and height of the rows in a grid. The values of grid-template-rows are space-separated, where each value represents the height of the row. Syntax: grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;Property Values: none: It does not set the height of
2 min read