Staggered Density Grid

A staggered density grid built with pure HTML and CSS that intentionally varies item size, spacing, or alignment to create visual rhythm and depth, breaking uniform patterns while keeping the layout structured and readable without relying on JavaScript.

Usage

This component is ideal for layouts where visual texture improves engagement, such as creative portfolios, content showcases, UI galleries, editorial layouts, or sections where uniform grids feel too rigid or repetitive.

Implementation

The staggered effect is achieved using CSS grid with mixed row heights, column spans, and controlled spacing offsets, allowing certain items to feel denser or lighter while maintaining overall grid consistency and responsiveness.

HTML

<div class="grid-staggered">
  <div class="grid-staggered__item is-wide">Wide</div>
  <div class="grid-staggered__item">A</div>
  <div class="grid-staggered__item">B</div>
</div>

<div class="grid-staggered">
  <div class="grid-staggered__item is-wide">Wide</div>
  <div class="grid-staggered__item">A</div>
  <div class="grid-staggered__item">B</div>
</div>

CSS

.grid-staggered {
  width: 200px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.grid-staggered__item {
  padding: 0.6rem;
  border-radius: 12px;
  background: #ffffff;
  color: #111827;
  text-align: center;
  font-size: 12px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
  transition: transform 150ms ease;
}

.grid-staggered__item.is-wide {
  grid-column: span 2;
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  color: #ffffff;
  font-weight: 600;
}

.grid-staggered__item:hover {
  transform: translateY(-2px);
}

@media (prefers-color-scheme: dark) {
  .grid-staggered__item {
    background: #020617;
    color: #e5e7eb;
  }

  .grid-staggered__item.is-wide {
    background: linear-gradient(135deg, #818cf8, #67e8f9);
    color: #020617;
  }
}

.grid-staggered {
  width: 200px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.grid-staggered__item {
  padding: 0.6rem;
  border-radius: 12px;
  background: #ffffff;
  color: #111827;
  text-align: center;
  font-size: 12px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
  transition: transform 150ms ease;
}

.grid-staggered__item.is-wide {
  grid-column: span 2;
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  color: #ffffff;
  font-weight: 600;
}

.grid-staggered__item:hover {
  transform: translateY(-2px);
}

@media (prefers-color-scheme: dark) {
  .grid-staggered__item {
    background: #020617;
    color: #e5e7eb;
  }

  .grid-staggered__item.is-wide {
    background: linear-gradient(135deg, #818cf8, #67e8f9);
    color: #020617;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Breaks uniform grids with intentional density variation
• Adds visual rhythm without randomness
• Maintains alignment and readability
• Designed for creative and exploratory layouts

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.