Masonry Grid

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Inter, system-ui, sans-serif;
  background: #050910;
  color: #f2f6ff;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem;
}

.demo {
  width: 100%;
  max-width: 900px;
}
.demo-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.375rem;
}
.demo-sub {
  color: #475569;
  font-size: 0.875rem;
  margin-bottom: 2rem;
}

/* ── Masonry layout ── */
.masonry {
  columns: 3;
  column-gap: 1rem;
}

@media (max-width: 768px) {
  .masonry {
    columns: 2;
  }
}
@media (max-width: 480px) {
  .masonry {
    columns: 1;
  }
}

/* ── Masonry item ── */
.masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 1rem;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.masonry-item:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* ── Color swatch strip ── */
.card-swatch {
  width: 100%;
}

.masonry-item--h1 .card-swatch {
  height: 5rem;
}
.masonry-item--h2 .card-swatch {
  height: 7.5rem;
}
.masonry-item--h3 .card-swatch {
  height: 6rem;
}
.masonry-item--h4 .card-swatch {
  height: 5rem;
}

/* ── Card body ── */
.card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.card-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #e2e8f0;
}

.card-text {
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.6;
}

.card-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.card-list li {
  font-size: 0.75rem;
  color: #475569;
  padding-left: 1rem;
  position: relative;
}

.card-list li::before {
  content: "·";
  position: absolute;
  left: 0.25rem;
  color: #334155;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Masonry Grid</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="demo">
    <h1 class="demo-title">Masonry Grid</h1>
    <p class="demo-sub">Pinterest-style layout using CSS columns.</p>

    <div class="masonry" role="list">

      <article class="masonry-item masonry-item--h2" role="listitem">
        <div class="card-swatch" style="background: linear-gradient(135deg, #7c3aed, #4f46e5);"></div>
        <div class="card-body">
          <h3 class="card-title">Design Systems</h3>
          <p class="card-text">Tokens, components, and patterns that scale across products and teams.</p>
        </div>
      </article>

      <article class="masonry-item masonry-item--h4" role="listitem">
        <div class="card-swatch" style="background: linear-gradient(135deg, #0891b2, #0e7490);"></div>
        <div class="card-body">
          <h3 class="card-title">Typography</h3>
          <p class="card-text">Type scales, fluid sizing with clamp(), and variable font axes.</p>
          <p class="card-text">Optical sizing, tracking adjustments, and proper line heights for readability at every scale.</p>
          <ul class="card-list">
            <li>fluid-type()</li>
            <li>font-variation-settings</li>
            <li>optical-sizing: auto</li>
          </ul>
        </div>
      </article>

      <article class="masonry-item masonry-item--h1" role="listitem">
        <div class="card-swatch" style="background: linear-gradient(135deg, #059669, #065f46);"></div>
        <div class="card-body">
          <h3 class="card-title">Color</h3>
          <p class="card-text">Semantic tokens and dark mode.</p>
        </div>
      </article>

      <article class="masonry-item masonry-item--h3" role="listitem">
        <div class="card-swatch" style="background: linear-gradient(135deg, #db2777, #9d174d);"></div>
        <div class="card-body">
          <h3 class="card-title">Animation</h3>
          <p class="card-text">Spring physics, GSAP ScrollTrigger, and View Transition API for page-level animation.</p>
          <p class="card-text">Motion design bridges micro-interactions and macro-experiences.</p>
        </div>
      </article>

      <article class="masonry-item masonry-item--h2" role="listitem">
        <div class="card-swatch" style="background: linear-gradient(135deg, #f59e0b, #b45309);"></div>
        <div class="card-body">
          <h3 class="card-title">Accessibility</h3>
          <p class="card-text">WCAG 2.2, ARIA patterns, focus management, and screen reader testing.</p>
        </div>
      </article>

      <article class="masonry-item masonry-item--h1" role="listitem">
        <div class="card-swatch" style="background: linear-gradient(135deg, #e11d48, #9f1239);"></div>
        <div class="card-body">
          <h3 class="card-title">Layout</h3>
          <p class="card-text">Grid + Flexbox.</p>
        </div>
      </article>

      <article class="masonry-item masonry-item--h3" role="listitem">
        <div class="card-swatch" style="background: linear-gradient(135deg, #2563eb, #1d4ed8);"></div>
        <div class="card-body">
          <h3 class="card-title">Performance</h3>
          <p class="card-text">Core Web Vitals, lazy loading, and bundle analysis. LCP, CLS, INP — measured and optimized.</p>
          <p class="card-text">Resource hints, critical CSS, and image optimization pipelines.</p>
        </div>
      </article>

      <article class="masonry-item masonry-item--h2" role="listitem">
        <div class="card-swatch" style="background: linear-gradient(135deg, #0d9488, #0f766e);"></div>
        <div class="card-body">
          <h3 class="card-title">CSS Architecture</h3>
          <p class="card-text">BEM, utility-first, and CSS Modules — choosing the right methodology for your team.</p>
        </div>
      </article>

      <article class="masonry-item masonry-item--h4" role="listitem">
        <div class="card-swatch" style="background: linear-gradient(135deg, #9333ea, #6b21a8);"></div>
        <div class="card-body">
          <h3 class="card-title">3D on the Web</h3>
          <p class="card-text">Three.js, WebGL shaders, and R3F. Creating immersive experiences without sacrificing performance.</p>
          <p class="card-text">From simple 3D models to complex particle systems and custom GLSL materials.</p>
          <ul class="card-list">
            <li>WebGL / WebGPU</li>
            <li>Three.js + R3F</li>
            <li>GLSL shaders</li>
            <li>Instanced meshes</li>
          </ul>
        </div>
      </article>

      <article class="masonry-item masonry-item--h2" role="listitem">
        <div class="card-swatch" style="background: linear-gradient(135deg, #dc2626, #7f1d1d);"></div>
        <div class="card-body">
          <h3 class="card-title">Component API Design</h3>
          <p class="card-text">Prop surface area, compound components, and headless patterns for maximum flexibility.</p>
        </div>
      </article>

      <article class="masonry-item masonry-item--h1" role="listitem">
        <div class="card-swatch" style="background: linear-gradient(135deg, #16a34a, #14532d);"></div>
        <div class="card-body">
          <h3 class="card-title">Tooling</h3>
          <p class="card-text">Vite, Bun, Biome.</p>
        </div>
      </article>

      <article class="masonry-item masonry-item--h3" role="listitem">
        <div class="card-swatch" style="background: linear-gradient(135deg, #0369a1, #0c4a6e);"></div>
        <div class="card-body">
          <h3 class="card-title">Testing Strategy</h3>
          <p class="card-text">Unit, integration, and end-to-end with Vitest, Testing Library, and Playwright.</p>
          <p class="card-text">Visual regression testing with Chromatic and Percy.</p>
        </div>
      </article>

    </div>
  </div>
</body>
</html>

A Pinterest-style masonry layout built entirely with CSS columns. Items of varying heights fill columns top-to-bottom with no empty gaps.

How it works

column-count and column-gap create the multi-column flow. Each card uses break-inside: avoid to prevent columns from splitting a card. This is the simplest zero-JS approach to masonry.

Responsive breakpoints

Screen	Columns
< 480px	1
480–768px	2
768–1024px	3
1024px+	4

Limitations

CSS columns fill top-to-bottom (column-first), not left-to-right (row-first). For row-first ordering, a JavaScript-based approach (e.g., Masonry.js) is needed.

Features

Zero JavaScript
Responsive column count via media queries
Hover lift effect with subtle shadow
break-inside: avoid prevents card splits