16. CSS Layout with Flexbox and Grid
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:
- Flexbox for greater control over arranging items along one axis
- Grid for honest-to-goodness grid-based layouts, like those print designers have used for decades
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 ...
Get Learning Web Design, 5th Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.