Grid Utilities

CSS Grid Made Easy

Apply grid to a container to enable CSS Grid. Use grid-cols-{n} to define columns and grid-rows-{n} for rows. Combine with gap utilities to space items.

• grid-cols-1, grid-cols-2 ... grid-cols-12 — fixed column count.
• grid-cols-none — removes column definition.
• col-span-{n} — make an item span N columns.
• col-start-{n}, col-end-{n} — explicit placement.
• grid-rows-{n}, row-span-{n} — same for rows.
• auto-cols-fr, auto-rows-fr — fractional implicit tracks.

<section class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
  <div class="rounded-xl bg-white p-6 shadow">Card 1</div>
  <div class="rounded-xl bg-white p-6 shadow">Card 2</div>
  <div class="col-span-1 rounded-xl bg-white p-6 shadow sm:col-span-2 lg:col-span-1">Card 3</div>
</section>