In the fourth lesson of the CSS Grid course we are going to understand the two dimensions with CSS Grid building our first basic layout of a web page.
In this lesson we are going to write the same basic layout that we did in the previous lesson with Flexbox but this time we are going to do it entirely with CSS Grid and its properties.
Let’s start by seeing how CSS Grid or Grid Layout works through the CSS display property. As in Flexbox, the Grid property applies to a container and its contents. Let us begin!
That’s how easy it is to create a layout with CSS Grid! You already know how to create layouts with two dimensions with the Grid property. The result is the same as with Flexbox.
It is important to note that Grid by default will find a way to adjust the content automatically regardless of the properties you assign to your elements. This means that if you set up three columns and only assign a fixed width to the first two, the third will take an automatic width based on how much space is available to expand.
With the container with Grid we can adjust the rest of the blocks with the grid-template-columns property that will allow us to distribute our content in columns that automatically adjust with the new unit of measure that we have seen.
I encourage you to do your own research and practice transforming a website that you have written without CSS Grid and transforming it with columns and rows. Remember that you have the list of properties in the CSS Grid documentation of W3Schools and Mozilla.org.
As always, if you have any doubt or question, you can send it through the support form of the subscriber intranet. See you in the next lesson! 🙂
Remember that if you will have access to everybody the courses and you can also enjoy everything from .
Facebook Comments
Disqus