Part – 11 Grid in CSS, Part 2/2
Hiaya everyone!
I decided to post this blog early as I wanted to post something different coming this festive season!
I have been working hard on a few things so I will also soon update more about them. Till then, here is the part 2 of the CSS Grid in the Learning CSS Series blogs.
Last time we covered till Grid Gaps, this time let’s complete the Grid set here by knowing more about some more CSS Grid concepts.
Grid Template Areas
We can name our entire grid area similar to what we have been doing with our rows by simply changing the grid-area property on elements. However since we want to also know which area belongs to which cell, we have to define this in the main grid container too.
This sort of representation is very similar to how we build tables in some other tools like excel etc.
To define a grid area in template we need to know the number of rows and number of columns.
Let’s say we have 2 columns and 3 rows, then our template area will look as following:
| .container{ display:grid; width:100vw; height:100vh; grid-template-columns: 25% 75%; grid-template-rows: 5% 90% 5%; grid-template-areas: “header header” “side Main” “footer footer”; } |
You can see how we used the grid-template-areas property here and used a table like fashion of defining our entire area.
Now let’s say we want to position one element in in one of these areas.
We can simply use the grid-area property in this context to achieve this by changing the area tag to the marked template area:
| .head{ background-color: red; grid-area:header; text-align: center; } |
Here we can see that we are positioning the header using the “header” value which we defined earlier in the grid template area. The end result is as follows:
We can leave an unnamed area by using the “ . “ value as follows where . has the lowest priority:
| .container{ display:grid; width:100vw; height:100vh; grid-template-columns: 25% 75%; grid-template-rows: 5% 90% 5%; grid-template-areas: “header header” “side Main” “. footer”; } |
Fit-content
fit-content() function works with the grid-template-rows/columns to accommodate change in sizing of the grid when the grid changes due to responsiveness.
E.g the grid row might have 8rem in desktop version, but on mobile version, the same length could change.
This can be accommodate by giving the length through fit-content();
E.g.
| grid-template-rows: 3.5rem auto fit-content(8rem); |
Responsiveness in Grid
A CSS grid is not inherently responsive like a flexbox.
We can however replicate the responsive behaviour by using media queries.
The way to do that would be by simply adding a media query for different screen sizes and ensuring that our grid-template-rows/columns are adjusted to that.
We can also use the auto-fill property while defining repeatable grid columns as:
| grid-template-columns:repeat(auto-fill, 10rem); |
Now what this does is that the grid will try to always fit as many elements as it can based on the size of the grid’s container. This can be used instead of media queries to create truly responsive grids.
For the situation where we might not have elements to fit the entire row, we can use the property auto-fit, which behaves mostly similar to the auto-fill property except for the fact that it will also center the elements if the given elements are not completely available to fit in the row.
Grid AutoFlow
Sometimes we won’t want to specify how the rows are created when specifying a grid.
In such scenarios we can use the property grid-auto-rows: width; to define how the automatically generated rows are created in our grid.
This also gives us the question that how would we generate the content in general in the grid.
The automatic behaviour for a grid is that whenever an element goes beyond the last specified column, it immediately moves to the next auto generated row!
However there could be times where we want to change this behaviour and specify the auto behaviour ourselves.
This can be done through the grid-auto-flow property which allows us to change the auto-generation behaviour of a grid. We can change it to column, dense etc to make sure that whenever a new element appears that can’t be accommodate in the defined setup it behaves according to this auto behaviour.
Implicit and Explicit Grid
Implicit simply means that the grid is implied and not defined.
This is true if we only define parts of a grid and not the complete grid itself as is done when using properties like grid-auto-flow.
However that is not the case when we manually define each and every element of a grid and also how it is templatized. This type of grid is known as explicit grid.
Grid vs Flexbox
Grid is a two dimensional positioning, whereas flexbox is one dimensional.
This is because a grid can have both rows and columns to be positioned separately whereas the flexbox has only one way of positioning which is either through a row or a column.
A flexbox is always a decent choice if we have some one dimensional data which is either just a row or a column.
E.g could be the content within the navbar, a banner etc.
A grid however is great to set templates of multiple dimensions, as we have seen when setting an entire page layout or configuring something two dimensional like tables or forms.
Summary
So this was a pretty big topic and we learnt a lot about grids. Here is a brief summary of all the topics we covered.
And we are finally done with the CSS Grid with this blog. If you want to read part 1, you can click here.
We are nearing the end here now and I would now like you all to be a bit more dynamic. Relax, I am not asking you to run somewhere, rather I want you all to break your web pages now and make them feel more alive and lively.
How to do that? Discover in the next blog!!
I keep on coding something cool, visit ankush.tech to see what all I am doing!
If you wish to read this whole info in a form of an easy to read book, do checkout the book “CSS Bullets, a comprehensive guide to all the CSS you need!“.
Thanks for sticking around!
Hope you like this series and stay tuned for more content on the learning.
Leave a Reply