Chapter 4: Progressively Enhanced CSS Layouts from Floats to Flexbox to Grid

by Diogo Souza

It can be difficult to achieve complex, yet flexible and responsive grid layouts. Various techniques have evolved over the years but most, such as faux columns, were hacks rather than robust design options.

Most of these hacks were built on top of CSS float property. When flexbox layout module was introduced to the list of display property options, a new world of options became possible. Now you can not only define the direction the container is going to stack the items but also wrap, align (items and lines), order, shrink, etc. them in a container.

With all that power in hands, developers started to create their own combinations of rules for all sorts ...

Get CSS Grid Layout: 5 Practical Projects now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.