Building Advanced Grid Layouts
The last two chapters were about learning the basics of CSS Grid and getting used to them. We’ve practiced adding grid layouts to pages and automatically arranging items. Since we’ve gained experience, we will now look into more advanced features of CSS Grid, one of which is not even available in all browsers yet, as of 2022.
In this chapter, we will look at advanced grid areas, the placement of grid items within grid cells, and subgrids, and how they differ from nested grids. And we’ll further develop parts of Awesome Analytics, our overarching project.
We’ll look at the following topics:
- What are the row axis and column axis?
- Arranging grid items and grid cells with the align and justify properties
- Defining and using advanced grid templates
- Creating subgrids
- Emulating subgrids with nested grids
- Masonry layouts
- Practicing with Awesome Analytics