A Complete Guide to CSS Grid
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns you can create two dimensional layout, making it easier to design web pages without having to use floats and positioning. CSS Grid one of most powerful tool to create simple to complex layout in a very easy way but to create those complex layout using bootstrap or material design is quite difficult. So in this tutorial we will explain in depth details of CSS Grid.
Introduction
In CSS Grid there two important building block which required to build the HTML layout, one is wrapper (Parent)container and other one is the child items (children). The wrapper is the actual grid and the items are the content inside the grid.
HTML code for a simple grid layout
<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>So to turn your container in gird you just need to add css display: grid in your parent class (grid-container)
.grid-container {
display: grid;
}In this way you can make a container in css grid layout which is two dimensional layout but if you only give display grid then it will not look like nothing, it’ll simply stacks 9div's on top of each other.
So to make it two dimensional there are two major thigs which will make this grid two dimensional and this are the core building blocks of CSS grid one is Columns and other one is Row.
Grid Columns and Grid Rows
The vertical lines of grid items are called columns and The horizontal lines of grid items are called rows. To make it this grid in two-dimensional, we’ll need to define the columns and rows. So let’s create three columns and three rows. We’ll use the grid-template-row and grid-template-column properties to create rows and columns.
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
background-color: orange;
padding: 5px;
}The values dictate how wide we want our columns to be (auto) and how tall we’d want our rows to be (auto). Here’s the result
We can see that we are making this grid in two dimensional like in table structure or in matrix structure. So we have 9 children and in grid-template-columnhow many number of values we will give based on that it will create rows automatically. So in grid-template-column if we give 4 it will create 5 columns and automatically it will create 2 rows, like this given below.
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto;
padding: 5px;
}
So you can see that we have 9 items that is why it will take 5 columns and in last row last columns is blank because we only have 9 children if we have 10 children then the last column will fill with 10. Like given below.
<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 class="grid-item">10</div>
</div>
So now we will cover most of the part of column and row and hope get a clear picture of CSS Grid row and column next see an another important thing of CSS grid is Grid Gap.
Grid Gap
The spaces between each column/row are called gaps. The grid-gap property defines the size of the gap between the rows and columns in a grid layout, and is a shorthand property for the following properties
- grid-row-gap
- grid-column-gap
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto;
grid-template-row: auto auto auto auto auto;
grid-column-gap: 50px;
grid-row-gap: 50px;
background-color: orange;
}
So we can see that by giving 50 px grid gap in row and column it will look like this, so it will give a gap of 50px in horizontally and also vertically. Instead of giving gird-column-gap and grid-row-gap we can also use grid-gap: 50px 50px. It means that row and column has 50px gap, once we have the gap if we want to merge the one column in two column or in three column then there is another man concept which is called Grid lines. Grid Lines are very useful when you want to use one item or children item in two or three or more column like in table how we rowspan and colspan, so that thing will be achivable by Grid Lines.
Grid Lines
The lines between columns are called column lines. The lines between rows are called row lines. So Grid Line work horizontally and vertically means column wise and also row wise. There are four css properties by which you can give Grid Lines namely grid-row-start, grid-row-end, grid-column-start, grid-column-end. So let see the below example and understand how it will work.
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto;
background-color: orange;
}
.grid-item {
background-color: #fff;
border: 1px solid orange;
padding: 20px;
font-size: 30px;
text-align: center;
}
.grid-container > div:first-child {
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 3;
}
So you can see that first item to start on the first grid line and end on the fourth column line. In other words, it’ll take up the entire row and it’ll take up the entire column. In short we can also write grid-row: 1 / 3 and grid-column: 1 / 3.
Conclusion
So CSS Grid layout a powerful layout engine by which you can create complex layout easily. As it uses two dimension layout by just using a wrapper container and children item, So it becomes easy to achieve complex layout it will give more responsive feature by default, So you do not need to use more media query in each breakpoint. Even nowadays CSS Grid System can provide you very much flexible layout easily which will be complex if you are using Bootstrap, Materialize or some other flexbox System. So try to use CSS Grid in your project and create some modern application.
