Grid auto

#Example

<div class="grid-auto grid-auto-sm"><div class="h-24 rounded-lg bg-surface-3"></div><div class="h-24 rounded-lg bg-surface-3"></div><div class="h-24 rounded-lg bg-surface-3"></div><div class="h-24 rounded-lg bg-surface-3"></div></div>

#Classes

3 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

.grid-auto {
  --grid-min: 16rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min), 100%), 1fr));
  gap: 1.5rem;
}

.grid-auto-sm {
  --grid-min: 11rem;
}

.grid-auto-lg {
  --grid-min: 22rem;
}

#Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Grid auto: start from the base class, then add modifiers -->
<div class="grid-auto grid-auto-sm"><div class="h-24 rounded-lg bg-surface-3"></div><div class="h-24 rounded-lg bg-surface-3"></div><div class="h-24 rounded-lg bg-surface-3"></div><div class="h-24 rounded-lg bg-surface-3"></div></div>

#Accessibility

• Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.

#Related components