Creating a masonry layout with CSS Grid

In a recent project I came across a nifty way to create a masonry grid layout using CSS grid and a smidge of javascript . Initially I thought about using something like Masonry.js or Isotope but it kinda felt a little bit overkill. Whats cool about this approach its super flexible and it’s not relying on any frameworks! I’m going to try and keep this post short and sweet so you can get up and running and enjoy this…

--

--

--

Designer/Developer for Missguided. Co-organiser of FCC MCR

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Install Node.js on macOS

Guide to useContext with Blog Example

How My Tech Journey Started

The 3 Prettiest React UI Libraries

Create a Registration page using Angular and AWS

Personalising BibDesk : citekeys and template

JavaScript and “ProtoHype”

Intercept HTTP Requests in Angular

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
Adam Collier

Adam Collier

Designer/Developer for Missguided. Co-organiser of FCC MCR

More from Medium

MDN front-end 2

Essential CSS Tutorial — Part 3

HTML Lesson 8: Block & Inline Content in HTML

CSS spec: Cascade Layers — quick introduction and usages