#3 Layout Design
Using Grid
Hello Everyone, Welcome to my blog 🙏.
I hope you are all safe and that this blog finds you in good health ❤️.
Intro
In my previous blog, we learned the importance of layout and how it helps to leverage accessibility and responsiveness.
If you missed it, click here
In this blog, we will learn more about
👉 What GRID is?
👉 Some of the essential properties like grid-template-columns, and grid-template-rows.
To begin with, first, let’s understand what a grid is?
Grid is a two-dimensional layout model. It lay out the content in both rows and columns. Hence it is Layout first.
We will take the same problem statement which we used in our previous blog for flex, if you missed it please click here.
Problem statement:
- It is a fixed layout and a single page with no scrolling.
- The header, navigation, and footer should have a height of 50px.
Basic structure
Seeing the layout, we have acquired a basic idea of how our HTML code is structured, and navigation, header and footer would contain a height of 50px.
With these things, laying the basic structure would be step 1.
Now that we got our basic structure ready. Let us get into the main topic of our blog, which is GRID.
So, to enable grid in our HTML code, we need to use display: grid;
As we know the grid works for both row and column so we need to specify the columns and rows beforehand.
The wrapper class, which is the parent, would have these (grid-template-rows & grid-template-columns) properties already set.
grid-template-rows property specifies the number of rows in the grid layout and how much height to be occupied.
Ex: grid-template-rows: 1fr 1fr; indicates 2 rows with fractional heights, if the container height is 100px, each row takes 50px.grid-template-columns property specifies the number of columns in the grid layout and how much width to be occupied.
Ex: grid-template-columns: 1fr 1fr; indicates 2 columns with fractional heights, if the container width is 100px, each column takes 50px.
According to the design,
Section, Article and Aside follow a different layout.
Content (section and article as per code) shares the first half of the row,
and the other one is occupied by Aside.
Aligning Content(Section and Article) and Aside
Note: Content and Aside wrapped in a div with class “main”.
As per the design, they should be in line with each other.
So, to achieve it,
we use grid-template-columns along with display: grid on the main class.
Great success!!!
We have our content and aside placed in line with each other.
But, we have a problem with the section and article, they should occupy the remaining space equally.
Aligning Section and Article
Section and Article are wrapped inside a content class so, occupying the remaining space we need to use
display: grid along with grid-template-rows with equal fractions.
This is not the end of the grid but just the beginning.
Unlike flex, the grid supports both rows and columns in the layout which is very easy to handle and implement.
This blog intended to get some glimpse of what a grid can do but, I recommend you to explore the below links and experience the magic of a grid.
CSS tricks, flexbox MDN.
Here we go, That’s it folks for this blog. Hope everyone liked it.
If you like it, give it a clap 👏 ,
and share it with your friend.
For more exciting content on Frontend, Please do follow me 🎯.
Thanks a lot, Everyone 🙏.
Until Next time,
Happy Learning ✍️
Abhishek Kovuri, UI developer
#TWBloggersClub