Basic Masonry Layout with CSS
1
2
3
4
5
6
Lorem ipsum
Lorem ipsum
7
8
9
In enim justo. Some text added here simply to take up some space and make this block bigger. A picture could be added too. Elements will shift between columns to get columns as close as possible to equal length.
In enim justo. Some text added here simply to take up some space and make this block bigger. A picture could be added too. Elements will shift between columns to get columns as close as possible to equal length.
10
Masonry layout
Masonry layout
1a
2a
3a
Hello
Hello
4a
5a
6a
Terrific
Terrific
7a
8a
9a
10a
Many trees
Many trees
The Codepen below shows the HTML and CSS used to create the above content and layout.
See the Pen Basic CSS Masonry Layout by Adam Frost (@adam-frost) on CodePen.