5 Grid layout
This chapter covers
- Using grid to build page layouts
- Understanding grid layout options
- Placing items using grid lines and named grid areas
- Explicit and implicit grid
- Using flexbox and grid together to build a cohesive web page layout
Flexbox has revolutionized the way we do layout on the web, but it’s only a piece of the picture. It has a big brother: a specification called the Grid Layout Module (grid). Together, these two specifications provide a full-featured layout engine.
In this chapter, I’ll show you how you can start using grid layout. I’ll give you an overview of how it works, then take you through several examples to illustrate the different things grid layout can do. Building a basic grid is simple. It’s also powerful enough to enable complex layouts, but doing so requires learning new properties and keywords. This chapter will guide you through them.
The CSS grid lets you define a two-dimensional layout of columns and rows and then place elements within the grid. Some elements may fill only one cell of the grid; others can span multiple columns or rows. The size of the grid can be defined precisely, or you can allow it to automatically size itself as needed to fit the contents within. You can place items precisely within the grid or allow them to flow naturally to fill in the gaps. A grid lets you build complex layouts like the one shown in figure 5.1.
Figure 5.1 Boxes in a sample grid layout
