https://github.com/alexandersandberg/flexbox-masonry-reloaded

An extended version of Tobias Ahlin's flexbox-powered masonry layout
https://github.com/alexandersandberg/flexbox-masonry-reloaded

css html javascript masonry responsive

Last synced: 2 months ago
JSON representation

An extended version of Tobias Ahlin's flexbox-powered masonry layout

• Host: GitHub
• URL: https://github.com/alexandersandberg/flexbox-masonry-reloaded
• Owner: alexandersandberg
• License: mit
• Created: 2019-05-16T14:06:50.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-02-03T12:07:07.000Z (over 1 year ago)
• Last Synced: 2025-07-25T11:26:54.728Z (2 months ago)
• Topics: css, html, javascript, masonry, responsive
• Language: HTML
• Homepage: https://alexandersandberg.github.io/flexbox-masonry-reloaded/
• Size: 16.6 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
![Preview](preview.png)

# Flexbox Masonry Reloaded

## About the project

A flexbox-powered masonry layout, based on [Tobias Ahlin](https://github.com/tobiasahlin)'s [awesome solution](https://tobiasahlin.com/blog/masonry-with-css/).

With CSS Custom Properties and a little bit of JavaScript:

* *Automatic container height* — No fixed height needed

* *Customizable gutter size* — Simply change `--gutter` in the CSS

* *Responsive* — Collapses into fewer columns on specified `@media` breakpoints

### More columns

The JavaScript works with any amount of columns, but needs some tweaking in the HTML and the CSS. See [Tobias's blog post](https://tobiasahlin.com/blog/masonry-with-css/) for more info on that (not the exact same fix, but similar).

## Usage

[**Check it out live**](https://alexandersandberg.github.io/flexbox-masonry-reloaded/) *or* download the files and open `index.html` in your preferred browser.

## A project by Alexander Sandberg

Thanks for checking out my project! ❤️

If you want to get in touch, or check out my other work, you can find me online here:

* [Website](https://alexandersandberg.com) (alexandersandberg.com)

* [Twitter](https://twitter.com/alexandberg) (@alexandberg)

## License

Distributed under the MIT License © [Alexander Sandberg](https://github.com/alexandersandberg)