Grid Layout

Class names

Class	Description
grid	display: grid;
grid-cols-1-12	Number of grid columns. From 1 to 12.
col-span-1-12	Number of columns an item spans. From 1 to 12.
col-start-1-12	Grid column line an item starts at. From 1 to 12.
col-end-1-12	Grid column line an item ends at. From 1 to 12.
row-span-1-12	Number of rows an item spans. From 1 to 12.

Responsive grid

You can combine the grid-cols-*, col-span-*, col-start-* and col-end-* classes with the standard sm, md, lg and xl breakpoint prefixes to make the grid responsive.

Justify grid items

Class	Description
justify-items-start	justify-items: start;
justify-items-center	justify-items: center;
justify-items-end	justify-items: end;
justify-items-stretch	justify-items: stretch;

Align and justify grid items

Class	Description
place-items-start	place-items: start;
place-items-center	place-items: center;
place-items-end	place-items: end;
place-items-stretch	place-items: stretch;

Examples

Grid

<div class="grid grid-cols-12 gap-1">
  <span class="bg-primary p-2 text-primary-foreground">1</span>
  <span class="bg-primary p-2 text-primary-foreground">2</span>
  <span class="bg-primary p-2 text-primary-foreground">3</span>
  <span class="bg-primary p-2 text-primary-foreground">4</span>
  <span class="bg-primary p-2 text-primary-foreground">5</span>
  <span class="bg-primary p-2 text-primary-foreground">6</span>
  <span class="bg-primary p-2 text-primary-foreground">7</span>
  <span class="bg-primary p-2 text-primary-foreground">8</span>
  <span class="bg-primary p-2 text-primary-foreground">9</span>
  <span class="bg-primary p-2 text-primary-foreground">10</span>
  <span class="bg-primary p-2 text-primary-foreground">11</span>
  <span class="bg-primary p-2 text-primary-foreground">12</span>
</div>

Responsive grid

<div class="grid grid-cols-1 gap-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-8 xl:grid-cols-12">
  <span class="bg-primary p-2 text-primary-foreground">1</span>
  <span class="bg-primary p-2 text-primary-foreground">2</span>
  <span class="bg-primary p-2 text-primary-foreground">3</span>
  <span class="bg-primary p-2 text-primary-foreground">4</span>
  <span class="bg-primary p-2 text-primary-foreground">5</span>
  <span class="bg-primary p-2 text-primary-foreground">6</span>
  <span class="bg-primary p-2 text-primary-foreground">7</span>
  <span class="bg-primary p-2 text-primary-foreground">8</span>
  <span class="bg-primary p-2 text-primary-foreground">9</span>
  <span class="bg-primary p-2 text-primary-foreground">10</span>
  <span class="bg-primary p-2 text-primary-foreground">11</span>
  <span class="bg-primary p-2 text-primary-foreground">12</span>
</div>

Justify items start

<div class="grid grid-cols-3 justify-items-start gap-4">
  <span class="bg-primary p-2 text-primary-foreground">1</span>
  <span class="bg-primary p-2 text-primary-foreground">2</span>
  <span class="bg-primary p-2 text-primary-foreground">3</span>
  <span class="bg-primary p-2 text-primary-foreground">4</span>
  <span class="bg-primary p-2 text-primary-foreground">5</span>
  <span class="bg-primary p-2 text-primary-foreground">6</span>
</div>

Justify items center

<div class="grid grid-cols-3 justify-items-center gap-4">
  <span class="bg-primary p-2 text-primary-foreground">1</span>
  <span class="bg-primary p-2 text-primary-foreground">2</span>
  <span class="bg-primary p-2 text-primary-foreground">3</span>
  <span class="bg-primary p-2 text-primary-foreground">4</span>
  <span class="bg-primary p-2 text-primary-foreground">5</span>
  <span class="bg-primary p-2 text-primary-foreground">6</span>
</div>

Justify items end

<div class="grid grid-cols-3 justify-items-end gap-4">
  <span class="bg-primary p-2 text-primary-foreground">1</span>
  <span class="bg-primary p-2 text-primary-foreground">2</span>
  <span class="bg-primary p-2 text-primary-foreground">3</span>
  <span class="bg-primary p-2 text-primary-foreground">4</span>
  <span class="bg-primary p-2 text-primary-foreground">5</span>
  <span class="bg-primary p-2 text-primary-foreground">6</span>
</div>

Justify items stretch

<div class="grid grid-cols-3 justify-items-stretch gap-4">
  <span class="bg-primary p-2 text-primary-foreground">1</span>
  <span class="bg-primary p-2 text-primary-foreground">2</span>
  <span class="bg-primary p-2 text-primary-foreground">3</span>
  <span class="bg-primary p-2 text-primary-foreground">4</span>
  <span class="bg-primary p-2 text-primary-foreground">5</span>
  <span class="bg-primary p-2 text-primary-foreground">6</span>
</div>

Column span

<div class="grid grid-cols-4 gap-1">
  <span class="col-span-2 bg-primary p-2 text-primary-foreground">col-span-2</span>
  <span class="bg-primary p-2 text-primary-foreground">1</span>
  <span class="bg-primary p-2 text-primary-foreground">2</span>
  <span class="col-span-3 bg-primary p-2 text-primary-foreground">col-span-3</span>
  <span class="bg-primary p-2 text-primary-foreground">3</span>
</div>

Column start and end

Position an item on the grid by the column lines it starts and ends at. In a four-column grid the lines are numbered 1 to 5, so col-start-2 col-end-4 places an item across the second and third columns.

<div class="grid grid-cols-4 gap-1">
  <span class="col-start-2 col-end-4 bg-primary p-2 text-primary-foreground">col-start-2 col-end-4</span>
  <span class="col-start-1 col-end-3 bg-primary p-2 text-primary-foreground">col-start-1 col-end-3</span>
  <span class="col-start-3 bg-primary p-2 text-primary-foreground">col-start-3</span>
  <span class="col-end-5 bg-primary p-2 text-primary-foreground">col-end-5</span>
</div>

Row span

<div class="grid grid-cols-3 gap-1" style="height: 10rem">
  <span class="row-span-2 bg-primary p-2 text-primary-foreground">row-span-2</span>
  <span class="bg-primary p-2 text-primary-foreground">1</span>
  <span class="bg-primary p-2 text-primary-foreground">2</span>
  <span class="bg-primary p-2 text-primary-foreground">3</span>
  <span class="bg-primary p-2 text-primary-foreground">4</span>
</div>

Place items start

<div class="grid h-full grid-cols-3 place-items-start gap-4">
  <span class="bg-primary p-2 text-primary-foreground">1</span>
  <span class="bg-primary p-2 text-primary-foreground">2</span>
  <span class="bg-primary p-2 text-primary-foreground">3</span>
  <span class="bg-primary p-2 text-primary-foreground">4</span>
  <span class="bg-primary p-2 text-primary-foreground">5</span>
  <span class="bg-primary p-2 text-primary-foreground">6</span>
</div>

Place items center

<div class="grid h-full grid-cols-3 place-items-center gap-4">
  <span class="bg-primary p-2 text-primary-foreground">1</span>
  <span class="bg-primary p-2 text-primary-foreground">2</span>
  <span class="bg-primary p-2 text-primary-foreground">3</span>
  <span class="bg-primary p-2 text-primary-foreground">4</span>
  <span class="bg-primary p-2 text-primary-foreground">5</span>
  <span class="bg-primary p-2 text-primary-foreground">6</span>
</div>

Place items end

<div class="grid h-full grid-cols-3 place-items-end gap-4">
  <span class="bg-primary p-2 text-primary-foreground">1</span>
  <span class="bg-primary p-2 text-primary-foreground">2</span>
  <span class="bg-primary p-2 text-primary-foreground">3</span>
  <span class="bg-primary p-2 text-primary-foreground">4</span>
  <span class="bg-primary p-2 text-primary-foreground">5</span>
  <span class="bg-primary p-2 text-primary-foreground">6</span>
</div>

Place items stretch

<div class="grid h-full grid-cols-3 place-items-stretch gap-4">
  <span class="bg-primary p-2 text-primary-foreground">1</span>
  <span class="bg-primary p-2 text-primary-foreground">2</span>
  <span class="bg-primary p-2 text-primary-foreground">3</span>
  <span class="bg-primary p-2 text-primary-foreground">4</span>
  <span class="bg-primary p-2 text-primary-foreground">5</span>
  <span class="bg-primary p-2 text-primary-foreground">6</span>
</div>