CSS Makeovers

With the arrival of Flexbox, Grid, and Shapes, CSS’s layout powers have undergone a radical but desperately needed makeover. Learn from popular sites and common layout patterns redone in Flexbox and Grid, and discover new layout possibilities.


The Boston Globe’s landmark redesign in 2011 ushered in the industry’s move to responsive web design. With CSS Grid poised to make a powerful impact of its own, it’s only fitting that we take a look at how we could replicate one of the Globe’s layouts with Grid.

Read More

New to CSS Grid?

A basic understanding of Grid’s basics should be enough to follow along with the majority of examples here. If you’re new to Grid, peruse the Resources page, which also includes links for learning Flexbox and Shapes.

Sites, Patterns & Other Layouts