The website layout is the key to building a successful website. To properly order your elements on the website, you need to learn how to position them. In that case, CSS grid property is one of the ways you can achieve a user-friendly layout. In this topic, you will learn about CSS grid property. You will learn how to start using CSS grid, and the fundamental properties that go along with it. At the end of this topic, we will go through examples of CSS grid usage.
CSS grid Property
Before the CSS Grid, in order to make a basic layout of a web page, you would have to use floats and positioning. The layout can be achieved with those properties but it is more complicated than with a CSS grid. The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it really easy to construct a basic layout.
CSS grid is a module that represents a two-dimensional grid-based layout system. It's the first module that is created to solve the problem of the layout of the website. However, today it is not the only one. By this point, you probably came across flexbox property. Flexbox is used for different cases, but the good news is you can combine it with the CSS grid. The grid property is a shorthand property for:
grid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columnsgrid-auto-flow
The properties above are covered in other topics. We will just briefly describe them here for you to better understand them. In the table below you can see the property used with display (grid along with the description):
Value | Description |
|---|---|
| Specifies the size of the rows |
| Specifies the size of the columns |
| Specifies the grid layout using the name items |
| Specifies the auto size of the rows |
| Specifies the auto size of the columns |
| Specifies how to place auto-placed items |
CSS Grid terminology
In order for you to better understand the CSS grid and its usage, first, it's good to understand its terminology. There are six key concepts: grid container, grid item, grid line, grid cell, grid track, and grid area.
The grid container is an element to which the display: grid property is applied. It represents the direct parent of all the grid items. Here is an example of the grid items:
<div class="container">
<div class="item item-1"> </div>
<div class="item item-2"> </div>
<div class="item item-3"> </div>
</div>The grid item represents direct descendants aka the children of the grid container. In the example below you can see the items. The not-item is not the direct descendant:
<div class="container">
<div class="item"> </div>
<div class="item">
<p class="not-item"> </p>
</div>
<div class="item"> </div>
</div>The grid line represents the dividing line that makes the structure of the grid. It can be both vertical and horizontal. The vertical lines represent the column grid lines and the horizontal represent the row grid lines. In the picture below you can see the column grid line:
The grid cell is a space between two adjacent rows and two adjacent column grid lines. In other words, it represents the single unit of the grid. You can see the grid cells in the picture below:
The grid track is a space between two adjacent grid lines. You can think of them as the columns or rows of the grid. Here is an example:
The grid area represents the total space surrounded by grid lines. The grid area can be made of any number of grid cells. Here is an example of a grid area:
The usage of CSS grid Property
In order to use a CSS grid, you need to define a container element as a grid with display: grid. That is the most important step. After that, you need to set the columns with grid-template-columns and set rows with grid-template-rows. Keep in mind that you don't need to pay attention to the source order which makes it easy to rearrange all the grids. Let's review that in the example below:
This HTML will achieve the output below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="grid-container">
<div class="item5">Footer</div>
<div class="item1">Header</div>
<div class="item4">Right</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
</div>
</body>
</html>And this HTML will output the same layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>
</body>
</html>The same applies to CSS:
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
gap: 10px;
background-color: #000000;
padding: 10px;
}
.grid-container > div {
background-color: #fbfbfb;
text-align: center;
padding: 20px 0;
font-size: 30px;
}.item5 { grid-area: footer; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item2 { grid-area: menu; }
.item1 { grid-area: header; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
gap: 10px;
background-color: #000000;
padding: 10px;
}
.grid-container > div {
background-color: #fbfbfb;
text-align: center;
padding: 20px 0;
font-size: 30px;
}The output would be the following:
As you can see, the items are in random order but you can still place them however you want to.
Conclusion
In this topic, you've learned about CSS grid property. We've covered the basic definition of CSS grid and its usage and studied several examples. Now, let's test what you've learned so far.