Sitemap
Deemaze Writing Wall

Software agency developing digital products and services.

Member-only story

CSS Grid — Responsive layouts and components

11 min readMay 3, 2018

--

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:

Our volunteer doggo!

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).

--

--

Deemaze Writing Wall
Deemaze Writing Wall

Published in Deemaze Writing Wall

Software agency developing digital products and services.

Rafaela Ferro
Rafaela Ferro

Written by Rafaela Ferro

Frontend developer at SingleStore. Juicy details at rafaelaferro.com.