Three different masonry style layouts
Three different masonry style layouts

Feed full of gorgeous images of different sizes, arranging perfectly like bricks in a wall. That’s masonry layout. And it requires JavaScript. Or… does it?

In this article I’m going to show you how you can achieve that look with just CSS.

Preparing the elements

We need bricks to build the wall. Since hardcoding 30 divs isn’t necessarily the most exciting thing to do, we’re just going to use a for loop. Don’t worry though, the styling itself will be done purely with CSS. Let’s use the lorem picsum API to get some nice images from Unsplash as backgrounds for the divs.


Photo by Clay Banks on Unsplash

ES6 introduced a brand new way of handling asynchronous actions and making network requests. Previously we would need to set up all the boilerplate required for XHR to make an API call, now we can simply do fetch(url). Awesome, right?


fetch is an asynchronous function. What this function returns is a Promise object. This kind of object has three possible states: pending, fullfilled and rejected. It always starts off as pending and then it either resolves or rejects. Once a promise resolves it runs the then method. This method takes a callback function as an argument and passes the resolved…

Photo by NASA on Unsplash

What is a network request

Whenever you submit a url from your web browser’s address bar, you make an HTTP request to a server. What you receive from that request is an HTML document, the website that you requested. HTTP is the protocol that allows us to do that.

What AJAX is useful for

In HTML, we can link to other documents using the a element. After clicking a link like that we get redirected to another page, specified in the href attribute. The problem is, the entire page needs to reload. What if we don’t want our users to stare at a white screen? Maybe we need to retrieve…

Three washing machines in a laundry
Three washing machines in a laundry
Photo by Tina Bosse on Unsplash

Why do we need asynchronous programming?

Normally, our JavaScript code is executed line by line, top to bottom. An instruction can only run once the previous one has completed. It is synchronous because there is only one thing happening at the same time.


This is great because it’s easy to read and reason about.

The problem occurs when one line of code takes more time. We can simulate a situation like that using window.alert:


alert freezes the browser and 2 won’t log to the console before we close the modal.

What if we have a time consuming operation but we don’t want…

Tomasz Chmielnicki

Front-end web developer, passionate about creating.

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