CSS Grid — Responsive layouts and components
Let’s make a photo gallery responsive quickly and using very few lines of CSS.
Hello again! 👋 Today we’re going to talk about how to build responsive layouts while using CSS Grid. If you’re just starting with Grid, I recommend that you read my first blogpost before this one. Baby steps!
In this post, we’re going to build a photo gallery (on our fictional social network for dogs) and I’m going to show you how I organize responsive layouts in two different scenarios:
- Layouts with repeating components;
- And how to make a component itself responsive.
Of course we’re sticking with puppies, so let me introduce Pady, Lola’s brother. 🐶 He’s quite helpful when he’s not too busy trying to eat his toys, so here he is:
Without further ado, let’s dive into those layouts.
Layouts with repeating components
You know the drill. The first thing you have to do is setup your grid with display: grid; so you can start working on it.
The HTML structure for the gallery is a div, the container where we’ll set the grid properties. Inside, several div items with images inside (so we can see the cells well).
