j-toscani / maisonry

A simple script to create a responsive maisonry grid.

Creating a responsive Maisonry-Grid

This project uses:

Base version

• CSS Custom Properties
• MediaQueryList API
• Array Methods
• DOM Manipulation

Advanced Version

• Fetch API
• Promises and Async/Await

Prerequisites

As most of the work is done by Javascript. If you are new to Javascript, you should know how you can access the DOM and how to work with Arrays.

The Basic HTML

The Basic Styles

The Concept: Sorting the elements

Problem

Solution

Implementation

Advanced Application: Adding images

Problem

Solution

Implementation