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:




Software agency developing digital products and services.

Recommended from Medium

How to Install and Use Homebrew

WorkFlows in Mendix

How CloudApp is Revolutionizing the Digital Workspace

4 Helpful tips for developer students

Introducing Standards Lab: an experimental environment for data standards

Industry Use Cases of Jenkins

Interview Questions (BlogPost_201)

My Day In Tech Support Hell: Remember When You Could Just Restart?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rafaela Ferro

Rafaela Ferro

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

More from Medium

Minimize extracted CSS file using Webpack. (CssMinimizerWebpackPlugin)

Adding a transition effect for looping background video with pure JS/CSS

Simple ways to make your page responsive: A Breakdown