Summary

In this chapter, we’ve now looked at the basic terms, structures, rules, attributes, units, and functions of CSS Grid. We’ve seen that a grid doesn’t have to look like just a bunch of rows and columns, with CSS Grid allowing us to build complex layouts with relatively small tools.

With grid-template-rows, grid-template-columns, grid-area, and grid-template, we can specify what the grid looks like, how large different grid tracks are, and how many of them there are. Moreover, we can precisely define where an item will be placed inside the grid with grid-area, grid-row, grid-column, and their specific start and end variants, such as grid-column-start or grid-row-end. Then, gap definitions help us separate items without the need for complex padding and margin definitions on the items.

To practice the things we’ve learned now, we will have our first look at Awesome Analytics, our overarching project, in the next chapter. We will learn how to apply grids to existing structures and how to work with CSS Grid to achieve the layouts we’d like.