BP HTML 07 Tailwind

Tailwind CSS Grid Overview

Grid Container

Use grid to create a grid container. Combine with grid-cols-{n} to define columns.

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

Column Span

Use col-span-{n} to make an item span multiple columns.

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2">Spans 2 columns</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
Spans 2 columns
Item 2
Item 3

Row Span

Use row-span-{n} to make an item span multiple rows.

<div class="grid grid-rows-3 grid-cols-2 gap-4">
  <div class="row-span-2">Spans 2 rows</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
Spans 2 rows
Item 2
Item 3

Grid Gap

Use gap-{size} to set spacing between grid items.

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

Responsive Grids

Use responsive prefixes sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 for different screen sizes.

<div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>
Item 1
Item 2
Item 3
Item 4