CSS Grid Layout
The CSS grid module is specially designed to solve the layout problem that we all had been facing for as long as we start creating websites. The CSS grid layout module allows us to create a complex and responsive grid layout with rows and columns. Previously, we used to create layouts using CSS flexbox, box model, tables, etc. that align items into columns and rows but these modules lack lots of functionalities such as vertical centering. As compared to these CSS modules, the CSS grid layout module overcomes all the problems related to grid layout and provides a very easy and efficient way to design a responsive grid layout.
To create a grid layout, we have to first create a grid-container element with the CSS property display: grid; and then, the direct child elements of the grid container automatically become grid-item(s).
Note: There is no need to use floats and positioning while creating a grid layout using CSS grid.
CSS Grid Container
The CSS grid container is a wrapper/parent element. To make an element behaves like a grid container, we have to first set the CSS property of that element display: grid | inline-grid;. All the elements that are present inside the grid container also the direct child can automatically become grid items.
Example: Creating CSS grid container using CSS
In the given example, we have created a grid container using <div> element by applying CSS property display: grid;. This grid container also consists of the grid items.
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
padding: 10px;
}
.grid-item {
background-color: #a6e9f5;
border: 1px solid rgba(0, 0, 0, 0.8);
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:
The grid-template property in CSS
The grid template property is a shorthand property for specifying grid columns, rows, and areas. The grid-template property is a shorthand property for the grid-column-*.
* = rows, columns, and areas.
CSS grid-template-rows property
The grid-template-rows property is used to specify the height of each row in a grid. The value of this property is a space-separated-list, which means we don't need to specify this property for each row. We can specify the value for each row by providing space between them.
CSS grid-template-columns property
The grid-template-columns property is used to specify the number of columns and width of each column in a grid. The value of this property is a space-separated list which means that the value of each column is specified by providing space between them.
Example of CSS grid-template-rows and grid-template-columns property
In the given example, we have set the height of the row using the grid-template-rows property and the width of the column using the grid-template-columns property.
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 80px 200px;
padding: 10px;
}
.grid-container > div {
background-color: #a6e9f5;
text-align: center;
padding: 20px 0;
font-size: 30px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Output:
The justify-content property in CSS
The justify-content property is used to align the items within the grid. While using the justify-content property we should keep one thing in mind that the width of the grid should be less than the container's width.
There are six different values available for this property, which are mentioned below:
| Value |
Description |
| space-evenly |
This property is used to provide equal space in between or around the columns. |
| space-around |
This property is used to equal space around the columns. |
| space-between |
This property is used to provide an equal amount of space between the columns. |
| center |
This property is used to align the grid in the middle of the container. |
| start |
This property is used to align the grid at the beginning of the container. |
| end |
This property is used to align the grid at the end of the container. |
Syntax of CSS justify-content property
Syntax of CSS justify-content property.
justify-content: space-evenly | space-around | space-between | center | start | end;
Example of CSS justify-content property
In the given example, we have created two grid layouts then we have applied the justify-content: space-evenly; to the first grid and the justify-content: space-around; to the second grid.
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout</title>
<style>
.grid-container {
display: grid;
justify-content: space-evenly;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
grid-gap: 10px;
background-color: #bab3b3;
padding: 10px;
}
.grid-container > div {
background-color:#7eaeed;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.grid-container1 {
display: grid;
justify-content: space-around;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
grid-gap: 10px;
background-color: #bab3b3;
padding: 10px;
margin-top: 30px
}
.grid-container1 > div {
background-color: #d67c7c;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Justify-content: space-evenly</h2>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h2>justif-content: space-around;</h2>
<div class="grid-container1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Output:
The grid-area property in CSS
The grid area property is a shorthand property for the grid-row-start, grid column-start, grid-row-end, and column-row-end. With the help of this property, we can set the numbering of the grid items on their own. So, the grid items do not appear in the same order as they were written in the code.
Example of CSS grid-area property
In this example, we have demonstrated how we can arrange the grid items on their own. The first value of the grid area property is set for the grid-row-start, the second value for the grid-column-start, the third value for the grid-row-end, and the fourth value for the grid-column-end.
Conclusion
In this lesson, we have learned how to create grids in CSS using pre-defined CSS properties. Also, we have learned multiple grid properties which are given below:
- grid-template-row
- grid-template-column
- justify-content
- grid-area
