Masonry grid layout
![](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fchrome.f3084991.png&w=128&q=75)
No
![](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsafari.8d7f87d0.png&w=128&q=75)
TP
![](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ffirefox.e1b3f334.png&w=128&q=75)
🚩
77
![](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fedge.21960552.png&w=128&q=75)
No
You might know this as the Pinterest layout. It’s a way to use a grid layout where elements on one axis (usually the vertical) can move to fill in gaps. Something like this:
You can implement this effect with a single line of CSS:
grid-template-rows: masonry;
If your browser supports it, you can see it in action below: