Css-only masonry layout

html

responsive-design

css-grid

browser-compatibility

byNikita Barsukov·Aug 25, 2024

Here's a quick setup for a CSS masonry layout leveraging CSS columns:

.masonry {
  /* Magic number 3: Three's a crowd, column-count */
  column-count: 3;
  /* Giving columns a little personal space. No hugging today. */
  column-gap: 16px;
}

.item {
  /* Telling items not to behave like gymnasts: No splitting */
  break-inside: avoid-column;
  /* Extra belly space for each item */
  margin-bottom: 16px;
}

<div class="masonry">
  <!-- Items here -->
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Here, column-count in the container and break-inside on items maintain integrity and prevent splitting. Modify column and margin sizes on demand.

In-depth analysis and practical examples

CSS Grid Level 3: A new hope for masonry

The CSS Grid Level 3 introduces masonry with grid-template-rows: masonry;, providing more simplified support for masonry layouts.

.grid {
  display: grid;
  /* Get you a grid that can do both: Resize and fill */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  /* When Row meets Masonry: A romantic comedy */
  grid-template-rows: masonry;
}

This snippet distributes your items in to columns of minimum 250px width.

Flexbox vs CSS Grid: Dawn of masonry

Considering Flexbox for a masonry-esque layout? flex-direction: column; can help, but CSS Grid outshines with a more versatile two-dimensional solution, allowing items to stride across columns and rows.

Crystal ball: Finetuning CSS Grid masonry

Knowing the dimensions? Perfect! Use grid-auto-rows, grid-gap, and grid-template-columns to shape the structure while catering content of different sizes.