CSS Grid and responsive columns
Use grid for two-dimensional layouts such as dashboards, galleries, and card collections. grid-cols-1 establishes one column; sm:grid-cols-2 adds two columns at the small breakpoint. For content-driven layouts, arbitrary grid templates or CSS-first custom rules may be appropriate.
A robust dashboard often uses a grid for the main content and flexbox inside each card. Do not force every layout into one system: grid and flexbox complement each other.
Adaptive card grid
<section class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
<article class="rounded-xl border bg-white p-5"><p class="text-sm text-slate-600">Open tasks</p><p class="mt-2 text-3xl font-bold">18</p></article>
<article class="rounded-xl border bg-white p-5"><p class="text-sm text-slate-600">Completed</p><p class="mt-2 text-3xl font-bold">42</p></article>
<article class="rounded-xl border bg-white p-5"><p class="text-sm text-slate-600">Overdue</p><p class="mt-2 text-3xl font-bold">3</p></article>
<article class="rounded-xl border bg-white p-5"><p class="text-sm text-slate-600">Team members</p><p class="mt-2 text-3xl font-bold">7</p></article>
</section>đź’ˇ The grid starts with one column, uses two from
sm, and four from xl. The browser lays out each card consistently while gap-4 controls both row and column spacing.Key Takeaways
- Use flexbox for one-dimensional alignment and grid for two-dimensional layout.
- Start with a mobile layout and add columns at wider breakpoints.
- Use
gap-*to maintain consistent spacing between grid tracks.