CSS3 Pushing the Limits

Chapter 11

Grid Layout, Regions, and Exclusions

The layout modules discussed in the two preceding chapters, Multi-column Layout and Flexbox, are both reasonably well-rounded and are right on the edge of breaking into the mainstream. In contrast, the remaining CSS3 layout modules to be addressed are much newer and more cutting edge, with significant changes to their respective specifications a very strong possibility before they get anywhere near mainstream usage—if they make it that far, of course.

Some flaws and issues need to be worked out (particularly in the case of Regions and Exclusions) before many developers will accept them as legitimate layout mechanisms, but the tools they propose and the results that can be achieved with them are nothing short of mind-blowing when you consider that issues such as vertical alignment have only recently been addressed!

This chapter tackles the concepts behind three very exciting layout modules and touches on the technical side of each in terms of the tools on offer and their respective syntaxes; however, I avoid deep analysis of each and every property because they are likely to be subject to subtle or even major changes before these modules become usable, so the focus in this chapter remains conceptual.

CSS Grid Layout allows you to define rows and columns directly in your stylesheet to form a grid within which you can arbitrarily place your content, regardless of its position in the source. CSS Regions propose a solution for laying ...