CSS Grid is a modern specification for page layout on the web. While it’s relatively new, grid is already widely supported and can be safely used in most modern websites. While redesigning rigby, I fell down a rabbit hole of sorts experimenting with layouts on the web. Print magazines have always stood out to me as the gold-standard for what is achievable in a two dimensional medium, but they have an easier development experience compared the web. Designing for a single aspect ratio and set of dimensions is magnitudes easier than our current standards for responsive web design.

However, with the addition of CSS Grid, this changes drastically. We no longer need to lean upon hackish CSS percentage values splitting our webpages into the all to common ¹⁄₃ design. Our layouts can become much more complex, original, and creative - along with being easier to design. As an experiment, I’ve tried to recreate several designs myself, with very promising results. Most of these layouts are created with less than 100 lines of code, and look very close to the designs I was recreating. I’ve so far created three of these:

Serena Williams for Fader (not working on mobile currently)

Louis Vuitton

Nya Upplagan

While creating these different layouts I’ve discovered for myself that working with CSS grid is, for the most part, a joy. Most of these layouts would be incredibly difficult to recreate the old hackish methods CSS presents.