In the seventh lesson of the CSS Grid course we are going to discover and use the grid-area function and grid-template-areas in our grid to build areas.
In this lesson we are going to continue our layout of 9 empty blocks to practice with new properties, this time we are going to create specific areas in which to automatically insert our numbered blocks.
To finish the lesson we are going to take the basic layout that we have built in CSS Grid and we are going to evolve it to specify all the content with areas and give it a professional touch. Let us begin!
That easy! You already know how to use grid-area in your CSS and size when building your grids in CSS Grid. The grid-template-areas function allows us to specify in our grid how the elements should be distributed and what names these areas will have.
This means that we could build an entire website by specifying different areas where content is dynamically filled: header, content, and footer. It is important to remember that CSS Grid will always adjust the content that we tell it to take into the space that it has available at that moment. In addition, these areas will help us to use the properties of grid-row and grid-column since they work the same as the aliases that we saw in previous lessons.
I encourage you to do your own research and practice with the area system that we have seen in this lesson, but instead of applying it to an example of empty blocks or to the same basic layout as in the lesson, apply it to a real website that It allows you to think carefully about how to use it mixed with the repeats and other properties that we have been seeing throughout the course with CSS Grid. It’s a challenge.
Remember that 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