The CSS Grid Layout makes it easier to design web pages without having to use floats and positioning.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.item-1 { grid-area: header; }
.item-2 { grid-area: menu; }
.item-3 { grid-area: main; }
.item-4 { grid-area: side; }
.item-5 { grid-area: footer; }
.grid-container1 {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main side side'
'menu footer footer footer footer footer';
grid-gap: 10px;
background-color: #e9c46a;
padding: 10px;
}
.grid-container1 > div {
background-color: #f4a261;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class="grid-container1">
<div class="item-1">Header</div>
<div class="item-2">Menu</div>
<div class="item-3">Main</div>
<div class="item-4">Side</div>
<div class="item-5">Footer</div>
</div>
</body>
</html>
Output:
The CSS grid layout contains a parent element (container), with one or more child elements:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #e9c46a;
padding: 10px;
}
.grid-item {
background-color: #f4a261;
border: 2px solid #333;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<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>
Output:
To create an HTML grid container set display property value to grid or inline-gird:
display: grid;
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #e9c46a;
padding: 10px;
}
.grid-item {
background-color: #f4a261;
border: 2px solid #333;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<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>
Output:
display: inline-grid;
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container1 {
display: inline-grid;
grid-template-columns: auto auto auto;
background-color: #e9c46a;
padding: 10px;
}
.grid-item1 {
background-color: #f4a261;
border: 2px solid #333;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container1">
<div class="grid-item1">1</div>
<div class="grid-item1">2</div>
<div class="grid-item1">3</div>
<div class="grid-item1">4</div>
<div class="grid-item1">5</div>
<div class="grid-item1">6</div>
<div class="grid-item1">7</div>
<div class="grid-item1">8</div>
<div class="grid-item1">9</div>
</div>
</body>
</html>
Output:
Grid columns and rows:
The vertical lines of grid items are columns, and the horizontal lines of grid items are rows:

The spaces between each column/row are gaps:

To adjust the gap size use the following properties:
Example (column-gap):
<!DOCTYPE html>
<html>
<head>
<style>
.gridContainer {
display: grid;
column-gap: 40px;
grid-template-columns: auto auto auto;
background-color: #e9c46a;
padding: 10px;
}
.gridItem {
background-color: #f4a261;
border: 2px solid #333;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="gridContainer">
<div class="gridItem">1</div>
<div class="gridItem">2</div>
<div class="gridItem">3</div>
<div class="gridItem">4</div>
<div class="gridItem">5</div>
<div class="gridItem">6</div>
<div class="gridItem">7</div>
<div class="gridItem">8</div>
<div class="gridItem">9</div>
</div>
</body>
</html>
Output:
Example (row-gap):
<!DOCTYPE html>
<html>
<head>
<style>
.gridContainer1 {
display: grid;
row-gap: 40px;
grid-template-columns: auto auto auto;
background-color: #e9c46a;
padding: 10px;
}
.gridItem1 {
background-color: #f4a261;
border: 2px solid #333;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="gridContainer1">
<div class="gridItem1">1</div>
<div class="gridItem1">2</div>
<div class="gridItem1">3</div>
<div class="gridItem1">4</div>
<div class="gridItem1">5</div>
<div class="gridItem1">6</div>
<div class="gridItem1">7</div>
<div class="gridItem1">8</div>
<div class="gridItem1">9</div>
</div>
</body>
</html>
Output:
Example (gap):
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container2 {
display: grid;
gap: 50px 70px;
grid-template-columns: auto auto auto;
background-color: #e9c46a;
padding: 10px;
}
.grid-item2 {
background-color: #f4a261;
border: 1px solid #333;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container2">
<div class="grid-item2">1</div>
<div class="grid-item2">2</div>
<div class="grid-item2">3</div>
<div class="grid-item2">4</div>
<div class="grid-item2">5</div>
<div class="grid-item2">6</div>
<div class="grid-item2">7</div>
<div class="grid-item2">8</div>
<div class="grid-item2">9</div>
</div>
</body>
</html>
Output:
Grid lines
The lines between columns are column lines, and the lines between rows are row lines.

Example:
Place a grid item at column line 1, and let it end on column line 3:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container3 {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #e9c46a;
padding: 10px;
}
.grid-container3 > div {
background-color: #f4a261;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.itemOne {
grid-column-start: 1;
grid-column-end: 3;
}
</style>
</head>
<body>
<div class="grid-container3">
<div class="itemOne">1</div>
<div class="itemTwo">2</div>
<div class="itemThree">3</div>
<div class="itemFour">4</div>
<div class="itemFive">5</div>
<div class="itemSix">6</div>
<div class="itemSeven">7</div>
<div class="itemEight">8</div>
</div>
</body>
</html>
Output:
CSS Grid Properties:
column-gap – defines the gap between the columns.
gap – a shorthand property for the row-gap and the column-gap properties.
grid – a shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties.
grid-area – a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties.
grid-auto-columns – defines a default column size.
grid-auto-flow – defines how auto-placed items are inserted in the grid.
grid-auto-rows – defines a default row size.
grid-column – a shorthand property for the grid-column-start and the grid-column-end properties.
grid-column-end – defines where to end the grid item.
grid-column-start – defines where to start the grid item.
grid-row – a shorthand property for the grid-row-start and the grid-row-end properties.
grid-row-end – defines where to end the grid item.
grid-row-start – defines where to start the grid item.
grid-template – a shorthand property for the grid-template-rows, grid-template-columns and grid-template-areas properties.
grid-template-areas – defines how to display columns and rows, using named grid items.
grid-template-columns – defines the size of the columns, and how many columns are in a grid layout.
grid-template-rows – defines the size of the rows in a grid layout.
Enjoy coding!
Read also: