Creating a grid / masonry layout using just CSS

Usually jQuery Masonry (isotope metafizzy) is used to create dynamic masonry layout but for the static masonry layout CSS can be used as well to achieve it.
What am I referring to when I say static masonry, well you will have to know exactly where each block will be placed. With jQuery the position of each block can be determined dynamically based on the width and height the blocks and the available width and height in which to fit them all.
With CSS flexbox you can achieve a similar result but you will have to know in advance where each block will be placed.
With the CSS grid module you can create a pretty similar layout but the downside to it is that the gaps between the items won't be uniform and not all browser support it. So i don't advice using it.

Result Box
  • html
  • css

Share This:

Feel free to leave a comment!

You might alos be interested in: