balance without effort

Dense Grid Packs Gaps

Grid finds balance

/* ❌ Manual positioning */
.item-1 { grid-column: 1; }
.item-2 { grid-column: 2; }
/* Leaves gaps, requires management */

/* ✅ Let grid pack naturally */
.gallery {
  display: grid;
  grid-template-columns: 
    repeat(auto-fill, minmax(120px, 1fr));
  grid-auto-flow: dense;
}

/* Items flow like water into gaps */
Grid auto-packs items without gaps...
1
Wide
3
Tall
5
6
Wide
8
9

"Excess is taken from what is too much
and given to what isn't enough."

Shrink/expand: items jump to fill holes; wasted whitespace disappears.