CSS Grid Layout

February 10, 2021 12:37 pm IST

You are Here:

Demo

This demo is an overview of most of the CSS grid properties. Learn all CSS grid property one by one displayed under 'CSS grid' heading on the left side menu.

Header

Left side Menu

Page Content

Footer

What is grid layout?

CSS grid layout is used to divide a page into major regions (rows and colums) of our choice.

Like tables, grid layout enables an author to align elements into columns and rows. However, the grid layout provides more flexibility and control over tables.

In the following example, we will customize the grid layout to look like a webpage.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> #outerdiv{ display: grid; grid: 90px/ auto auto auto; background-color: #cccccc; } #outerDiv div{ border: 1px solid #267326; padding: 25px; background: #339933; color: #fff; margin: 8px; text-align: center; } #outerDiv div:nth-child(1){ grid-column: 1 / span 3; } #outerDiv div:nth-child(2){ background: #cc6600; grid-row: 2 / span 3; } #outerDiv div:nth-child(3){ background: #ff1a1a; grid-row: 2 / span 2; } #outerDiv div:nth-child(4){ background: #008ae6; grid-row: 3 / span 1; } #outerDiv div:nth-child(5){ background: #b31aff; grid-area: 4 / 2 / span 1 / span 2; } </style> </head> <body> <div id="outerDiv"> <div>Header</div> <div>Left side Menu</div> <div>Page Content</div> <div>Advertisement</div> <div>Footer</div> </div> </body> </html>

Run

CSS grid Properties (for parents)

The following table provides a list of CSS properties to control all the grid items in a grid container.

Property	Explanation
display	Will treat a container (<div>) as grid.
grid-template-rows	Specifies the height of rows in a grid layout.
grid-template-columns	Specifies the width of columns in a grid layout.
grid-template-areas	Specifies areas within the grid layout.
grid-template	A shorthand property for grid-template-rows grid-template-columns grid-template-areas
grid-auto-rows	Specifies a size for the rows in a grid container.
grid-auto-columns	Specifies a size for the columns in a grid container.
grid-auto-flow	Specifying exactly how auto-placed items get flowed into the grid.
grid	A shorthand property for grid-template-rows grid-template-columns grid-template-areas grid-auto-rows grid-auto-columns grid-auto-flow .
grid-row-gap	Specifies the size of the gap between the rows in a grid layout.
grid-column-gap	Specifies the size of the gap between the columns in a grid layout.
grid-gap	Specifies the gaps (gutters) between rows and columns.

CSS grid Properties (for children)

The following table provides a list of CSS properties to control a specific grid item in a grid container.

Property	Explanation
grid-row-start	Specifies on which row-line the item will start.
grid-column-start	Specifies on which column-line the item will start.
grid-row-end	Specifies on which row-line the item will end.
grid-column-end	Specifies on which column-line the item will end.
grid-row	A shorthand property for grid-row-start grid-row-end
grid-column	A shorthand property for grid-column-start grid-column-end
grid-area	A shorthand property for grid-row-start grid-column-start grid-row-end grid-column-end