25+ CSS Masonry Layout Examples (Free Code + Demos)

Masonry effect created only with CSS and HTML

The trick here is using "flex flow: column wrap;" and a fixed height so that the content will wrap to the new column. I've set the heights for each element to make sure the bottom is flush, so the next element will wrap to a new column whenever it cannot fit. This masonry layout is best ...

Read More

Using CSS Grid and "writing-mode: vertical-lr" to create a tiled layout that automatically populates from top-to-bottom, left-to-right as more content is added.

100% Responsive. Resize the browser window to see the action.

A masonry style photo gallery.

There are times when a masonry layout is an appropriate design decision. Depending on what else that design has to accommodate, these solutions might be a good fit.

CSS Flexbox module allows you to layout things more easily.

Number 10 of a series of 10 code examples supporting an article on CSS Grid Masonry layouts: https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb For CSS Grid expertise: Rachel Andrew: https://gridbyexample.com/ Jen Simmons: http://labs.jensimmons.com/

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

A pure CSS-only responsive masonry.

All you need to know to get a 100% responsive Masonry grid layout in 11 easy steps!

https://w3bits.com/css-grid-masonry/

Super cool image grid layout with CSS Grid. Its fully responsive, source order independent and very easy to code. Have fun, cheers!

As an example of a Masonry styled grid layout where not all the tiles are the same size, I made this example based off of a project I once did on a WordPress site. The Load More button simply just clones the grid as if its pulling in more posts from a blog on a WordPress site.

Responsive masonry grid layout Each div have a background image On screen over 700px , card with class fat = twice as tall & wide as regular card tall = twice as tall as regular card wide = twice as wide as regular card To understand the "span" keyword in css-grid https://alligator.io/cs...

Read More

Masonry cards with the structure of bootstrap. Background images. Background transition on hover.

Responsive grid Masonry using only CSS (for modern browsers)

prototype of a black friday sale & giveaway preview using css grid layout. grid-auto-flow: dense is pretty cool.