A Pocket Guide to CSS3 layout modules

In the last few years we have seen a great leap forward in what we can achieve with CSS – web fonts, gradients, shadows and media queries are now part of our everyday toolkit.

CSS layout itself, however, has moved on little. Developers have experimented with using display: table and display: inline-block for layout, in order to mitigate the limitations of layouts based on absolute positioning and floats. Yet, these methods seem as much like hacks as those they try to replace, and come with their own problems.

The future of CSS layout looks far brighter. In this little book Rachel covers some of the exciting modules that are part of the CSS3 specification. They promise a future where we can lay out elements to a grid and easily achieve the ambitions of equal height columns or spreading content evenly across a page.

Who should read this book?

If you're a developer or designer with intermediate to advanced level knowledge of CSS and HTML and you want to know the latest techniques, this book is for you.

Topics include:

PART 1: MULTICOLUMN LAYOUT

This module is the most mature and has the most browser support of all the modules covered in this book, so it’s a great place to start our exploration of all that is new in CSS layout.

PART 2: CSS FLEXIBLE BOX LAYOUT

The CSS flexible box layout module, commonly referred to as flexbox, gives us a brand new layout mode in CSS – flex layout. This section takes a look at some of the main layout problems flexbox can solve.

PART 3: CSS GRID LAYOUT

The CSS grid layout module was proposed by Microsoft and is still very much a work in progress. This section focuses on examples of the current proposal as implemented in Internet Explorer 10.

PART 4: CSS REGIONS

The final two sections of this book discuss some very interesting new proposals authored by Adobe and Microsoft. While these are at an even earlier stage than grid layout, they enable layouts that until now have been impossible and are worth our time when exploring all that is new in CSS layout.

PART 5: CSS EXCLUSIONS

If you have ever needed text to flow around a shape, or wanted to cut out a shape in the middle of content, then you will be interested in the CSS exclusions and shapes module, proposed by Adobe.