How to make a responsive Table layout using CSS Grid?
In this article, you will learn how to use CSS Grid to make awesome layouts that are also responsive.
Alright guys, today I will tell you how to use CSS Grid for making great layouts that have multiple rows and columns.
Let's begin with getting a little background on what is a CSS Grid and why to use it in the first place. Here we go:-
CSS Grid-It is a layout that helps make complex, responsive grid layouts that would be very difficult to make otherwise. It gives you a built-in template that let you create a primary grid very quickly and the best part is that each cell of the grid is a flex container so it is easy to fit your elements according to the UI you want. This is an example of a layout made with the CSS Grid.
The above image is a basic example of a CSS Grid but you can make a very complex layout. So, let's get coding😉.
Making the basic folder structure and files for our project
So now we will make a basic HTML page for our project. Here is the HTML page.
In the above image, I made a basic HTML page and linked it to the CSS file in which we will style our container element and make it a grid container. You can also wrap up all the CSS in style tags but I prefer to keep the files separated.
Creating the grid container for the project in the CSS file
Now, I will tell you how to implement a CSS grid container and set the other elements in it as per requirement. To make an element a grid container we have to set the display property of the container as grid. This is how we do it.
One thing to keep in mind is that you have to hardcode the height and width of the container. At this point, the children of our container element will align themselves in different columns of one row, but we will fix that too in the next part.
Making rows and columns for our container
How to make rows?
Now, we will see how to make rows and columns, and also specify their width and height. To specify the number of rows, we will use the attribute grid-template-rows, by this you can specify the number and height of rows, there are two ways to do that. Here are both the ways-
In one of the ways, we have used an inbuilt function repeat() which takes the number of rows as the first argument and the height of the row as the second argument. The 1fr is the fractional unit of measure in CSS, it signifies that our row will take 1/3rd of the total available space on the grid. In the second one, we have given as many measures as the number of rows we want. I would recommend using the first method as by that one, you can make a grid with even 100 or more rows.
How to make columns?
In the same way, we can make columns. Here is an example-
We can use any unit of measure for creating the dimensions of rows and columns and it is not necessary to have all the columns of the same width. The same applies to rows.
grid-template-area and grid-area property.
grid-template-area property
By using this property you can easily make designs as I made or maybe even better than that. Here is an example of grid-template-area property.
In this property, we specify which child element would acquire which position in the grid. Here we have to write the name of the child at the position where we want it to occur. The header is at the top of the grid of words made in the above image and it is also at the top of the page in my project. This way we can make an element expand to many rows and columns.
grid-area property
This property assigns the position which is given to the element in the grid-template-area. The name which is at the desired position, when given to an element, acquires that position. Here is how it looks
Notice that I have given the grid-area of header to this element, it signifies that this element has to take place of header in the grid-template-area. It is not required to give the element grid-area the same as its id or class name, it can also have any other name but then the same name should be present in the grid-template-area.
Final Result:
This is the end result of our hard work guys. You have just built a layout that is nothing less than professional. Rejoice and be proud of yourself, also do let me know in the comments what you want to learn next in this blog, I hope this tutorial was helpful and you have learned something great from here.
