🧱 CSS Masonry Grid

Create a masonry style image gallery with just CSS! Resize your browser to see the columns shift. When you resize the window, the column count will decrease until you get a single column on mobile. All you need is this code:


            section {

                columns: 6;

                column-width: 256px;

                column-gap: 10px;

              }

Instructions

columns: 6;
Replace this number with the maximum number of columns you want to display on large screens.

column-width: 256px;
This value determines the minimum width of a column. When your viewport width is too small to display 6 columns @ 256px each, it will reduce the number of columns automatically. Neat!

Learn more about CSS columns.