CSS Grid
CSS Grid
CSS Grid is a modern way of representing layout. It is the first CSS layout that comes up with a two-dimensional grid system. CSS Grid replaces the old float layout using less, and more readable and logical CSS. The biggest advantage of the Grid system is that it works perfectly with Flexbox, which means now you can use more readable and fewer properties to build your layout with the power of Flexbox and Grid System.
Now first understand the above-given diagram. Grid works on row and column both at a time. The complete horizontal row and vertical column are called Grid tracks. Two adjacent vertical and horizontal grid lines are called Grid-cell. Spacing between two grid cells is known as a Gutter and we can achieve it using the gap property in CSS. The area between two vertical and two horizontal grid lines is called the Grid area. We cannot achieve a Grid system by just applying the grid property but we have to specify a row or column.
Grid column:
We can achieve column layout by using grid-template-columns property
<div class="box">
<div class="box--1"></div>
<div class="box--2"></div>
<div class="box--3"></div>
</div>
.box {
display: grid;
grid-template-columns: 150px 150px 150px;
}
.box--1 {
height: 200px;
background-color: red;
}
.box--2 {
height: 200px;
background-color: blue;
}
.box--3 {
height: 200px;
background-color: green;
}
The output will be
Grid row:
We can achieve row layout by using grid-template-rows property
.box {
display: grid;
grid-template-rows: 150px 150px 150px;
}
.box--1 {
width: 200px;
background-color: red;
}
.box--2 {
width: 200px;
background-color: blue;
}
.box--3 {
width: 200px;
background-color: green;
}
The output will be
Gap property
We can achieve gutter in CSS by using Gap property
.box {
display: grid;
grid-template-rows: 150px 150px 150px;
gap: 20px;
}
.box--1 {
width: 200px;
background-color: red;
}
.box--2 {
width: 200px;
background-color: blue;
}
.box--3 {
width: 200px;
background-color: green;
}
The output will be
Multi-dimensional Grid
We can achieve a multi-dimensional grid using the property of row and column simultaneously.
.box {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 200px 200px;
gap: 40px;
}
.box--1 {
width: 200px;
background-color: red;
}
.box--2 {
width: 200px;
background-color: blue;
}
.box--3 {
width: 200px;
background-color: green;
}
.box--4 {
width: 200px;
background-color: blueviolet;
}
.box--5 {
width: 200px;
background-color: goldenrod;
}
.box--6 {
width: 200px;
background-color: skyblue;
}
The output will be
Fractional Unit in CSS Grid
A fractional unit is used to fill all the space in the Grid.
.box {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 200px 200px;
gap: 10px;
}
.box--1 {
background-color: red;
}
.box--2 {
background-color: blue;
}
.box--3 {
background-color: green;
}
.box--4 {
background-color: blueviolet;
}
.box--5 {
background-color: goldenrod;
}
.box--6 {
background-color: skyblue;
}
Repeat property in CSS Grid
if we want to define 3 boxes, having the same width of 1 fractional unit.
.box {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 200px 200px;
gap: 10px;
}
The out will remains same as before
Spaning in CSS Grid
Spanning means capturing the area of other grid items by placing them after spanned items.
.box {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 200px 200px;
grid-auto-rows: 200px;
gap: 40px;
}
.box--1 {
background-color: #000;
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 2;
grid-column-end: 3;
}
The output will be
as we can see in the above image the black box captured the area of two grid items by placing every other element next to him this will create a new row and we cannot see our last item until we set the grid-auto-rows property to a specific width. Two more ways of spanning are
Spanning method # 2:
.box {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 200px 200px;
grid-auto-rows: 200px;
gap: 40px;
}
.box--1 {
background-color: #000;
grid-row: 1/2;
grid-column: 1/3;
}
.box--2 {
background-color: skyblue;
}
.box--3 {
background-color: goldenrod;
}
.box--4 {
background-color: blueviolet;
}
.box--5 {
background-color: blue;
}
.box--6 {
background-color: gray;
}
The output remains the same as before but you can see at box--1 we use fewer properties of Grid as compared to the first method of spanning.
Spanning method # 3
.box {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 200px 200px;
grid-auto-rows: 200px;
gap: 40px;
}
.box--1 {
background-color: #000;
grid-area: 1/1/2/3;
}
.box--2 {
background-color: skyblue;
}
.box--3 {
background-color: goldenrod;
}
.box--4 {
background-color: blueviolet;
}
.box--5 {
background-color: blue;
}
.box--6 {
background-color: gray;
}
The output will remain the same as before but this time we wrote spanning only in one line by using the grid-area property.