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:

Icons made by Freepik from www.flaticon.com.

By now, you might have realised this blogpost is just an excuse to show off my cute pupper, but give me some leash! If you don’t like dogs (you cold-hearted cat person 😒), I brought you some CSS as well.

The grid skeleton

There is, of course, a huge number of ways you can define a grid to structure each page or component, accordingly to your needs. Here we want a simple example, so I’m going to use the following structure: