CSS Grid — Responsive layouts and components

Let’s make a photo gallery responsive quickly and using very few lines of CSS.

Our volunteer doggo!

Layouts with repeating components

Images still have different heights, yes, but we’ll deal with that later, I promise! 🙏
Oh no, we lost him. 😨

Implicit grid

This is pure evil.
Wow, so flexible.
This just got cheesy. 🧀

Responsive Components

Have I mentioned Pady enjoys eating his toys? 🏈
Note how there are empty spaces below the avatar and left to the like button, where we left the fullstops.
Tada! 🎉

Wrap up 🚩

Some considerations

Continue reading


Who was a good boy? 🐾

Deemaze Writing Wall

Software agency developing products for web and mobile.

Thanks to Filipe Gonçalves, António Lima, Paulo Santos, and João Oliveira.

Rafaela Ferro

Written by

Digital designer at Deemaze Software. Juicy details at rafaelaferro.com.

Deemaze Writing Wall

Software agency developing products for web and mobile.