Grid unlike flex-box is something difficult to wrap around your mind with.It can cause a lot of problems if you don't understand it as i have experienced.
Grid is very helpful when it comes to making a layout for websites and it becomes even more powerful when you combine it with flex-box.They are like the jay and veeru of css world one is incomplete without the other.You can make do with just one of them but why make do when you can use both.
grid has numerous properties to use but I am just going to give you a brief of the basics because it might get overwhelming and the more you practice more you gonna understand how things work with grid.
Just like flex-box we need to give a property of display:grid to a container with some elements inside it.
as you can see from above picture as soon as we apply the display grid the elements try to take the whole length of the container div and they are still in a column unlike flex-box.
In flex-box for us to center elements vertically and horizontally you gotta write justify-content center and align-items center but in grid it is just one line of code you write place -items center and voila.
But the real power of grid comes from its grid-template-areas and grid-template-columns that allows you to make any layout for website a hell lot easier than ever.
With grid template areas you give names to containers so that you can reference then and then simply with grid template areas on the container with display grid you can make the layout for example
.div1{
area:nav
}
.div2{
area:main
}
container{
display:grid;
grid-template-columns:1fr 1fr 1fr;
grid-template-area:"nav nav nav"
"main main main"
}
With this type
of code it becomes easier to make the website responsive as you just have to switch the grid-template-columns and area for a single column layout and its responsive.
example:
container{
display:grid;
grid-template-columns:1fr;
grid-template-area:"nav "
"main"
}
Thanks for reading!!
Top comments (0)