Auto Flow Dense Grid

An auto flow dense grid built with pure HTML and CSS that automatically packs grid items to minimize gaps, efficiently filling available space and creating a compact, masonry like layout without relying on JavaScript or external libraries.

Usage

This component is ideal for content collections where item sizes vary, such as image galleries, card libraries, UI component showcases, resource lists, or dashboards where efficient space usage improves scanning and visual density.

Implementation

The dense layout is achieved using CSS Grid’s auto-flow: dense property combined with flexible column definitions, allowing smaller items to backfill empty grid spaces while maintaining responsiveness and alignment.

HTML

<div class="grid-dense">
  <div class="grid-dense__item">A</div>
  <div class="grid-dense__item is-wide">B</div>
  <div class="grid-dense__item">C</div>
</div>

<div class="grid-dense">
  <div class="grid-dense__item">A</div>
  <div class="grid-dense__item is-wide">B</div>
  <div class="grid-dense__item">C</div>
</div>

CSS

.grid-dense {
  width: 200px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  grid-auto-flow: dense;
  gap: 0.4rem;
}

.grid-dense__item {
  padding: 0.5rem 0;
  border-radius: 12px;
  background: #f9fafb;
  color: #111827;
  font-size: 12px;
  text-align: center;
  box-shadow: 0 8px 16px rgba(0,0,0,0.12);
  transition: transform 150ms ease;
}

.grid-dense__item:hover {
  transform: translateY(-1px);
}

.grid-dense__item.is-wide {
  grid-column: span 2;
}

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

.grid-dense {
  width: 200px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  grid-auto-flow: dense;
  gap: 0.4rem;
}

.grid-dense__item {
  padding: 0.5rem 0;
  border-radius: 12px;
  background: #f9fafb;
  color: #111827;
  font-size: 12px;
  text-align: center;
  box-shadow: 0 8px 16px rgba(0,0,0,0.12);
  transition: transform 150ms ease;
}

.grid-dense__item:hover {
  transform: translateY(-1px);
}

.grid-dense__item.is-wide {
  grid-column: span 2;
}

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

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses dense packing to reduce empty gaps
• Creates masonry like visual efficiency
• Adapts well to mixed size content
• Designed for space optimized 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.