CSS3 layout modules
By Rachel Andrew
Explore some of the latest exciting CSS layout modules, including multicolumn layout, flexbox, grid layout, and more.
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.
This module is the most mature and has the most browser support of all the modules I cover in this book, so it’s a great place to start our exploration of all that is new in CSS 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.
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.
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.
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.
Rachel Andrew is a web developer and director of edgeofmyseat, a UK web development consultancy and creators of the small content management system, Perch.
She is the author of a number of web design and development books. When not writing code, writing about business and technology on her blog, or speaking at conferences, you will usually find Rachel out running the roads and trails of south-east England.
“CSS3 multicolumn layout has been a tantalising possibility for some years now. However, it hasn't been taken up as much as it deserves”
Rachel Andrew
