Grid Utilities — Tailwind CSS

CSS Grid di Tailwind: 123 456 Columns: grid-cols-1 ... grid-cols-12, grid-cols-none Rows: grid-rows-1 ... grid-rows-6 Gap: gap-4, gap-x-4, gap-y-2 Span: col-spa

CSS Grid di Tailwind:

<div class="grid grid-cols-3 gap-4">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
</div>

Columns: grid-cols-1 ... grid-cols-12, grid-cols-none Rows: grid-rows-1 ... grid-rows-6 Gap: gap-4, gap-x-4, gap-y-2 Span: col-span-2, col-span-full, row-span-2 Start/End: col-start-2, col-end-4

Contoh layout:

<!-- Sidebar + Content -->
<div class="grid grid-cols-4 gap-6">
  <aside class="col-span-1">Sidebar</aside>
  <main class="col-span-3">Content</main>
</div>

Yang akan kamu pelajari