Today we will learn about beautiful and creative masonry layout examples designed with HTML, CSS, Javascript for websites!
Masonry Layout CSS Flexbox
Masonry Layout is a grid system built on columns with a predefined width of the object. The main function of this layout is to help you make full use of the space as well as eliminate unnecessary spaces on the website. To make it easier for you to imagine, let's take a look at the following image social networking website design:

Masonry Layout CSS Flexbox

You can check out the results below.
See the Pen Pure CSS Masonry Gallery with Flexbox by digistate (@digistate) on CodePen.
Masonry gallery HTML
You can check out the results below.
See the Pen Masonry Layout Demo 1 by Jen Simmons (@jensimmons) on CodePen.
Masonry gallery CSS

You can check out the results below.
See the Pen Masonry with filtering function using "Multiple Filter Masonry" by digistate (@digistate) on CodePen.
Masonry CSS Grid

You can check out the results below.
See the Pen FLIP Image Grid Gallery Transition | 🔍 Magnified Masonry | @keyframers 2.7.0 Live @ CodePen Orlando by haycuoilennao19 (@haycuoilennao19) on CodePen.
CSS Masonry Layout

You can check out the results below.
See the Pen CSS Grid - Masonry by César (@cesalberca) on CodePen.
CSS Masonry Left To Right

You can check out the results below.
See the Pen Pure CSS masonry layout w/ Flexbox by Jhey (@jh3y) on CodePen.
Masonry Infinite Scroll

You can check out the results below.
See the Pen Infinite Scroll - Masonry by Dave DeSandro (@desandro) on CodePen.
CSS Grid Masonry Layout

You can check out the results below.
See the Pen Responsive post grid with Masonry by Maxime Lafarie (@maximelafarie) on CodePen.
Masonry Gallery Jquery

You can check out the results below.
See the Pen Rahul Arora's Left-to-right Masonry Layout using CSS Grid by Chris Coyier (@chriscoyier) on CodePen.
Masonry Layout

You can check out the results below.
See the Pen Masonry by RenGM (@Vidy) on CodePen.
Masonry Image Layout

You can check out the results below.
See the Pen Masonry Layout with CSS Grids by Madalena Aza (@Madalena-Design) on CodePen.
Pure CSS Layout

You can check out the results below.
See the Pen CSS Masonry Effect by Luca (@93lucasp) on CodePen.
Masonry Js Example

You can check out the results below.
See the Pen Masonry Layout JS Vanilla by Alberto Mateo (@Mathiew82) on CodePen.
CSS Masonry Layout

You can check out the results below.
See the Pen CSS Column masonry layout by Trevor Eyre (@trevoreyre) on CodePen.
Responsive Masonry With CSS Column

You can check out the results below.
See the Pen Responsive pseudo Masonry in CSS column by Olivier C (@olivier-c) on CodePen.
Jquery Masonry Image Gallery

You can check out the results below.
See the Pen Isotope & Fancybox by Ungmo Lee (@ungmo2) on CodePen.
Masonry Image Gallery

You can check out the results below.
See the Pen Image Gallery by kw7oe (@kw7oe) on CodePen.
Masonry Grid Gallery

You can check out the results below.
See the Pen Masonry Grid Gallery - CSS Practice by Kate Hummer (@katehummer) on CodePen.
Related Articles:
Summary
I hope the article will provide you with useful masonry layout css for web development and if you have any questions, just send an email and I will respond as soon as possible. I hope you continue to support the site so that I can write more good articles. Have a nice day!