Learning Web Design, 5th Edition

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