A lot of people often get confused between flexbox and grit layout.So, the main difference between flexbox and grid layout is that flexbox is for one-dimensional layouts as in you can change column or a row at a time, whereas grid layout is two-dimensional, and you can change column and rows simultaneously.
Its hard to explain this through words, so I am gonna use code to explain this to you.
Grit in action
As of now we have this html code and web preview to start with :
grid-template
Now what if want to have these two divisions side by side. Then first we have to define the display property as grid and then we have to use grid-template-column property of it.
I wanted the first column to be bigger than the second one, that is why I used 70% and 30%, you can specify any width you want.
Now if we want to add more divisions to this page, and we want them to follow this same pattern of 70% and 30%, then all we have to do is nothing. Yes, you read it right. Check out this next image if you don’t believe me.
See, I didn’t change a thing and it still follow the same pattern.
grid-gap
Now what if we want space between our columns, then all we have to do is use the grid-column-gap property of the grid and specify the value of it. And similarly if we want gap between our rows, we can use grid-row-gap property of the grit. And what if we want to do this both at the same time, then all we have to use is grid-gap property.
grid-template
Now, to make you understand this, I am gonna make a new web page, which is like this :-
Now we use this grid template, if we want to specify the number of columns we want to have in each row.
We only made changes in between the style tag. We wanted to have three rows that’s why we used “1fr 1fr 1fr” and we wanted all of them to have the same width. So what if we want the middle box to have more width than the others just change the it to this “1fr 2fr 1fr”.
Conclusion
I hope that you would have much clearer understanding of grid layout than you have before reading this blog. So see ya on the next blog.