9 Free CSS Masonry Grid Layouts

By | May 4, 2021

This is a collection of free CSS Masonry grids. I have found around the Codepen! This Masonry grid allows you to easily create grid layouts in HTML and CSS without having to program the whole thing in JavaScript. CSS Masonry grids are a great way to help layout elements in a grid-like format. If you need some inspiration for your next design layout, see the free CSS Masonry grids below.

See the Pen CSS ANIMATION PAGE BUILD by DevTips (@devtips) on CodePen.

Author

  • DevTips
  • August 29, 2016

Link

Made with

  • Pug / Sass / JavaScript

About the Code

CSS Masonry Grid Animation Effects

The CSS masonry grid effect is one of the most popular effects in web design. A style that gives the illusion of many images stacked on top of each other when viewed on the grid, split up into tiles. The effect is mainly built using CSS3 and JavaScript. This article tells you how to build a similar effect using simple HTML and CSS code.

More info: Link

Dependency: jquery.min.js, masonry.pkgd.js


See the Pen Masonry – imagesLoaded progress, vanilla JS by Dave DeSandro (@desandro) on CodePen.

Author

  • Dave DeSandro
  • June 2, 2018

Link

Made with

  • HTML / CSS / JavaScript

About the Code

Using vanilla JS to implement masonry grid

This is a fun little experiment that lets you show a progress bar while loading images with vanilla JS.

More info: Link

Dependency: masonry.pkgd.js, imagesloaded.pkgd.js


See the Pen Bootstrap Masonry Grid Template by Artūrs Deņisovs (@artursden) on CodePen.

Author

  • Artūrs Deņisovs
  • June 21, 2017

Link

Made with

  • HTML / CSS

About the Code

Bootstrap Masonry Grid Template

Here’s a powerful bootstrap template for you; It’s a free Bootstrap Masonry Grid Template for your next project. This is an extension of the Bootstrap framework which enables you to create amazing websites and web pages in no time.

More info: Link

Dependency: bootstrap.min.css, bootstrap.min.js


See the Pen Masonry – layout method, vanilla JS by Dave DeSandro (@desandro) on CodePen.

Author

  • Dave DeSandro
  • January 14, 2016

Link

Made with

  • HTML / CSS / JavaScript

About the Code

Vanilla JS Masonry Grid Layout Method

In this demo, we will be setting up a basic masonry grid layout with vanilla JavaScript. This is not just another post on how to set up the masonry layout, it’s also about how to toggle the item when the user mouse over or clicked on the specific item.

More info: Link

Dependency:


See the Pen React Masonry Grid by Goran Rakic (@golle404) on CodePen.

Author

  • Goran Rakic
  • December 16, 2018

Link

Made with

  • Pug / SCSS / JavaScript

About the Code

Responsive masonry grid made with ReactJS and flex-box

Masonry grids are great for displaying content in a way that is easy on the eyes. One of the most popular styles used in the wild is the Isotope masonry grid. In this demo, we’ll look at creating a ReactJS masonry grid styled with Pug/SASS and use the latest ECMAScript features to organize a more scalable ReactJS module pattern.

More info: Link

Dependency: react-15.1.0.min.js, react-dom-15.1.0.min.js


See the Pen Isotope – imagesLoaded callback, vanilla JS by Dave DeSandro (@desandro) on CodePen.

Author

  • Dave DeSandro
  • June 2, 2018

Link

Made with

  • HTML / CSS / JavaScript

About the Code

Display Images On Your Website With The Masonry Grid (Vanilla JS)

CSS Masonry grids are great at websites but they’re also really versatile. On mobile and tablet devices, masonry layouts transfer very well to a horizontal layout. It’s simple to create a Masonry grid with vanilla JavaScript and CSS. And you don’t need to download any plugin to get that functionality.

More info: Link

Dependency: masonry.pkgd.js, imagesloaded.pkgd.js


See the Pen Infinite Scroll v4 – Masonry, vanilla JS by Dave DeSandro (@desandro) on CodePen.

Author

  • Dave DeSandro
  • January 2, 2021

Link

Made with

  • HTML / CSS / JavaScript

About the Code

Create a Masonry Style Image Grid with Infinite Scroll in Vanilla JS

Masonry image grid with infinite scroll is a pure HTML and CSS technique to display a grid of images in responsive websites. This demo demonstrates how to create a basic masonry grid layout using vanilla JS, which can be extended to particular scenarios.

More info: Link

Dependency: infinite-scroll.pkgd.js, masonry.pkgd.js


See the Pen Isotope & Fancybox by Ungmo Lee (@ungmo2) on CodePen.

Author

  • Ungmo Lee
  • November 30, 2017

Link

Made with

  • HTML / CSS / JavaScript

About the Code

Isotope & Fancybox Masonry image grid with good animation

Isotope & Fancybox responsive layout css masonry grid with multiple row images, filter the content when user clicks tabs. FancyBox & Isotope used for animation and view full-size images.

More info: Link

Dependency: jquery.fancybox.css, jquery.min.js, jquery.fancybox.min.js, isotope.pkgd.min.js


See the Pen Build a CSS Masonry grid Layout with just HTML and CSS by RenGM (@Vidy) on CodePen.

Author

  • RenGM
  • February 10, 2015

Link

Made with

  • HTML / CSS

About the Code

Build a CSS Masonry grid Layout with just HTML and CSS

A CSS Masonry grid design. All images from Unsplash. The grid is responsive and pure CSS.

More info: Link

Dependency: font-awesome.min.css, jquery.min.js


Author: CV

I am a Front-end Developer, graduate of Information Technology, and founder of w3tweaks.com. I have 12+ years commercial experience providing front-end development, producing high quality responsive websites and exceptional user experience.