Masonry Layouts
Updated on
Last site update: 8 May 2024
Basic
The easy method is is use some simple CSS
1.container {
2 columns: 180px, 10; /* 180px is the minimum width, 10 is the max no. of cols */
3 column-gap: 5px;
4}
5/* flexible images */
6img {
7 width: 100px;
8}
This lays the content out top to bottom. If you want L to R it can be done with grid and a bit of JS.
The quick way is to use W3 Bits masonry generator that does everything for you.