CSS in Depth

Chapter 6. Grid layout

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 ...