Categories: CSSScriptWeb Design

Responsive Masonry Layouts with CSS Grid and Mason-it.js

Mason-it is a lightweight JavaScript library that transforms CSS Grid powered layout into a responsive masonry layout while preserving your original grid design.

Many developers, myself included, have reached for CSS Grid to build layouts, only to find that most masonry libraries want to dictate their own positioning, often ignoring grid-template-columns or gap. mason-it takes a different approach: you define the grid, and it handles the vertical stacking.

Table of Contents

Toggle

Features

How to use it:

1. Install Mason-it and import it into your project.

# NPM
$ npm install mason-it

import MasonIt from 'mason-it';

<!-- OR -->
<script src="/dist/mason-it.min.js"></script>

2. For mason-it to work as intended, your grid container needs a specific CSS property:

.my-masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Your column setup */  gap: 15px; /* Your desired gap */  align-items: start; /* Essential! Prevents items from stretching to fill row height */  /* grid-auto-rows: min-content; */ /* Optional, but consider for content-driven row heights */}

3. Call MasonIt.init() after your grid elements are in the DOM.

MasonIt.init('.my-masonry-grid', {
  masonDelay: 100, // Optional: delay in ms before first layout
  masonPollInterval: 0 // Optional: polling interval in ms, 0 = disabled
});

4. Or use the declarative attribute approach:

<div class="my-masonry-grid" data-mason-it>
  <div class="grid-item">Content 1</div>
  <div class="grid-item">Content 2</div>
  <!-- More grid items -->
</div>

<!-- With options -->
<div class="my-masonry-grid" data-mason-it="mason-delay:{500} mason-poll-interval:{2000}"></div>

5. API methods:

MasonIt.init(selector, [options])