HTML and CSS: Visual QuickStart Guide, 9th Edition

16

Layouts with CSS Grid and Flexbox

In This Chapter

Modern Solutions for an Important Problem

Using Flexbox

Using CSS Grid Layout

Browser Support

Wrapping Up

In the last chapter, you learned the finer points of how the box model can be styled, and some of the longer-standing methods for manipulating layout.

But new tools have been introduced in CSS to give you better control over your markup and to give it more semantic meaning. Those tools are the CSS Grid Layout Module and the CSS Flexible Box Layout Module, known more familiarly as CSS Grid and Flexbox. In this chapter, you’ll learn what they are, how they work, and when to use each.

Modern Solutions for an Important Problem

Part of the reason Flexbox and CSS Grid (or simply Grid) have ...