This chapter covers
- Exploring grid tracks and arranging our grids
- Using the minmax and repeat functions in CSS Grid
- Working with the fraction unit, which is unique to CSS Grid
- Creating template areas and placing items in the areas
- Considering accessibility when using grids
- Creating gutters between columns and rows within grids
Now that we have a basic understanding of how CSS works, we can begin exploring our options for laying out HTML content. In this chapter, we’ll focus on layout with grids.
A grid, in this sense, is a network of lines that cross to form a series of squares or rectangles. Now supported by all major browsers, CSS Grid has become a popular layout technique.
Essentially, a grid is made up of columns and rows. We’ll create our grid and then assign positions to our items much as we place boats on a grid when playing the board game Battleship.