#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.

Grid — 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.

Simple Layout

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.

Basic Structure

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.

Aligning content and aside

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.

Final output

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