16. CSS Layout with Flexbox and Grid
In this chapter
Flex containers and items
Flow direction and wrapping
Flex item alignment
Controlling item “flex”
Grid containers and items
Setting up a grid template
Placing items in the grid
Implicit grid features
Grid item alignment
Get ready…this is a whopper of a chapter! In it, you will learn about two important CSS page layout tools:
Each tool has its special purpose, but you can use them together to achieve layouts we’ve only dreamed of until now. For example, you could create the overall page structure with a grid and use a flexbox to tame the header and navigation elements. Use each technique for what it’s best suited for—you don’t have to choose just one.
Now that browsers have begun to support these techniques, designers and developers have true options for achieving sophisticated layouts with baked-in flexibility needed for dealing with a wide array of screen sizes. Once old browsers fade from use, we can kiss our old float layout hacks goodbye (in the meantime, they make decent fallbacks).
You may notice that this chapter is big. Really big. That’s because the specs are overflowing with options and new concepts that require explanation and examples. It’s a lot to pack in your mind all at once, so I recommend treating it ...