CSS Grid layout — crossed sections

An introduction to CSS Grid and its potential with a practical example.

My first contact with CSS Grid was at a talk from Rachel Andrew and I was fascinated by the problems it solves and possibilities it creates. I played around with it a bit and today I want to show you a layout scenario that wouldn’t be trivial to implement without CSS Grid — a layout with intertwined sections.

I will not explore in depth each CSS property, considering this is not meant to be an exhausting tutorial. Instead, I’ll leave some links at the end so you can check more detailed documentation about the properties we use here!

The layout 🐾

For the layout example, we’ll use a fictional social network for dogs (doggos want to meet new doggos every now and then). For each profile, we want to see a name, some info about the pupper, a photo (obviously! 😍), a bio and achievements (like trophies 🏆, they deserve it).

Let’s say that for some reason, the designer behind this very useful platform wants the profile page to have this strange arrangement. Meet Lola, our volunteer doggo: