This chapter covers
- Using CSS’ first true layout system—grid
- Understanding grid layout options
- Laying out items on a 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 the beginning. It has a big brother: another new specification called the Grid Layout Module. Together, these two specifications provide a full-featured layout engine for the web like you’ve never seen before.
In this chapter, I’ll show you how you can start learning grid layout today. 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 only fill 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 6.1.
