Masonry Layout Generator

Generate CSS masonry/Pinterest-style layouts

Layout Settings

3
16px

Item Settings

12
100px
300px

Presets

Live Preview

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

Generated CSS

.masonry-container {
  column-count: 3;
  column-gap: 16px;
  column-fill: balance;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 16px;
  display: inline-block;
  width: 100%;
}

/* Alternative: CSS Grid Masonry (where supported) */
@supports (grid-template-rows: masonry) {
  .masonry-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: masonry;
    gap: 16px;
  }
  
  .masonry-item {
    margin-bottom: 0;
  }
}