Photo by Pankaj Patel on Unsplash
Before Writing this article I used CSS Grid for only one purpose that is making 1-D layouts either a row or a column and more specifically using it to give fixed size to the elements inside the grid like
grid-template-columns: 70px 250px auto auto 370px;
Or
grid-template-rows: .5fr 1fr 1fr 1fr 1fr;
But CSS Grid is more than that, it can be used to make great 2d layouts in one go which helps in taking care of responsiveness till some point and saves from using multiple grids and flex box. And saves you from writing a lot of code which is at some point not easy to maintain because if you want to change some width in one element you have to make many changes at different places so that the whole thing does not fall apart.
Lets try to make a 2-D layout like this
So lets start with creating its html and basic css
HTML
<body>
<div class="parent">
<div class="div1 items"> 1</div>
<div class="div2 items"> 2</div>
<div class="div3 items"> 3</div>
<div class="div4 items"> 4</div>
<div class="div5 items"> 5</div>
</div>
</body>
CSS
*{
margin: 0px;
padding: 0px;
}
.parent {
display: grid;
height: 100vh;
grid-template-columns: 70px 250px auto auto 370px;
}
.div1 { background-color: lightblue; }
.div2 { background-color: lightyellow; }
.div3 { background-color: lightpink; }
.div4 { background-color: skyblue; }
.div5 { background-color: lightsalmon; }
So if we run the above code we will get something like this
Pretty Simple So far right? Now lets add the grid-template-rows to this
.parent {
display: grid;
height: 100vh;
grid-template-columns: 70px 250px auto auto 370px;
grid-template-rows: .5fr 1fr 1fr 1fr 1fr;
}
Now the output will be something like this
Hmmm kind of confusing now right? How the height of all these elements decreased? Well to understand this lets go to the web inspector and click on the grid button which is visible on the parent div.
You'll get a layout like this
Now in this layout see how the whole page is divided with vertical and horizontal lines , now if you see the horizontal lines you can see that first row's height is lesser than all the other ones, this is because we set the height of first row to be .5fr in the grid-template-rows.
So that's what the grid-template-rows did, it divided the whole page according to the values we gave it will divide it into more parts if we added more values in grid-template-rows and pushed all the elements in first row.
Now here comes the fun part , now we will use a great property of grid that is grid-area
So basically grid-area is used to set grid item's size and location in a grid-layout.
grid-area has four parameters-
- Row-start
- Column-start
- Row-end
- Column-end
So lets start to design our layout using these four parameters -
For the first element we want it to go all the way down till the end and horizontally till the second column , it does sounds a little confusing that how to do that right? Well it was at least for me.
Lets look at the grid layout we got from the web inspector , you will notice there is numbering of each row and column
You can use these numbers to track where to start and end your rows and columns , so lets start with first column, so it will be like
.div1 { background-color: lightblue;
grid-area: 1/1/6/2;
}
Here the grid area says
- row start - 1
- column start - 1
- row end - 6
- column end - 2
and therefore give us a layout like this
Now lets fast-forward (assuming you did the second column yourself) and go to the third column which is just on the top with less height here are its grid area parameters -
.div3 { background-color: lightpink;
grid-area: 1/3/2/6;
}
Here lets see the parameters, it says row should start at 1 and should end at 2 meaning it will just end at second row and its column will start from 3 and go all the way till 6 thus giving us a layout like this -
After customizing all the elements our code will look like this-
*{
margin: 0px;
padding: 0px;
}
.parent {
display: grid;
height: 100vh;
grid-template-rows: .5fr 1fr 1fr 1fr 1fr;
grid-template-columns: 70px 250px auto auto 370px;
width: 100%;
min-width: 0px;
}
.div1{
background-color: lightblue;
grid-area: 1/1/6/2;
}
.div2{
background-color: lightyellow;
grid-area: 1/2/6/3;
}
.div3{
background-color: lightpink;
grid-area: 1/3/2/6;
}
.div4{
background-color: skyblue;
grid-area: 2/3/6/5;
}
.div5{
background-color: lightsalmon;
grid-area: 2/5/6/6;
}
.items{
border: 3px solid black;
min-width: 0px;
}
Also this is the layout of discord's Main page , which is the project I am working on to clone it . So after working some more hours it ended up looking like this using this same layout -
You can check it out at my Github Profile
Thanks a lot for reading this article :)
Top comments (0)