Skip to main content

Grid Layout

In this chapter, you learn how to leverage CSS Grid with Tailwind CSS.

Creating a grid container​

Use the grid class to create a grid container.

<div class="grid">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Specifying the number of columns​

Fixed number of columns​

<!-- 3 columns -->
<div class="grid grid-cols-3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
ClassColumns
grid-cols-11
grid-cols-22
grid-cols-33
grid-cols-44
grid-cols-66
grid-cols-1212

Dynamic column counts in v4​

In v4, you can specify any number directly.

<!-- v4: any number -->
<div class="grid grid-cols-5">...</div>
<div class="grid grid-cols-15">...</div>

Auto-fit​

<!-- Adjusts automatically to the content -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))]">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

Specifying the number of rows​

<div class="grid grid-rows-3 grid-flow-col">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Spacing (gap)​

<!-- All directions -->
<div class="grid grid-cols-3 gap-4">...</div>

<!-- Different gaps for horizontal and vertical -->
<div class="grid grid-cols-3 gap-x-4 gap-y-8">...</div>

Spanning (merging)​

Column span​

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2">Spans 2 columns</div>
  <div>1 column</div>
  <div>1 column</div>
  <div>1 column</div>
  <div class="col-span-3">Spans 3 columns</div>
</div>
ClassSpan
col-span-11 column
col-span-22 columns
col-span-33 columns
col-span-fullAll columns

Row span​

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

Start and end positions​

Column position​

<div class="grid grid-cols-6 gap-4">
  <div class="col-start-2 col-end-4">Columns 2-3</div>
  <div class="col-start-5">From column 5</div>
</div>
ClassPosition
col-start-1Starts at 1
col-end-3Ends at 3
col-start-autoAuto

Row position​

<div class="grid grid-cols-3 grid-rows-3 gap-4">
  <div class="row-start-2 row-end-4">Rows 2-3</div>
</div>

Alignment​

Aligning items (place-items)​

<!-- Centered -->
<div class="grid place-items-center h-screen">
  <div>Center of the screen</div>
</div>
ClassAlignment
place-items-startStart
place-items-endEnd
place-items-centerCenter
place-items-stretchStretch

Aligning content (place-content)​

<div class="grid grid-cols-2 place-content-center h-64">
  <div>1</div>
  <div>2</div>
</div>

Aligning individual items (place-self)​

<div class="grid grid-cols-3 h-32">
  <div class="place-self-start">Start</div>
  <div class="place-self-center">Center</div>
  <div class="place-self-end">End</div>
</div>

Auto placement (grid-auto-flow)​

ClassPlacement direction
grid-flow-rowRow direction (default)
grid-flow-colColumn direction
grid-flow-row-denseRow direction (dense)
grid-flow-col-denseColumn direction (dense)
<!-- Place in the column direction -->
<div class="grid grid-rows-3 grid-flow-col gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Subgrid​

Uses for subgrid

Subgrid (grid-cols-subgrid / grid-rows-subgrid) is a CSS Grid Level 2 feature. Because child elements can inherit the track definitions of the parent grid, it is handy for aligning the height of footers in a card list, and similar cases.

The subgrid utilities are available from Tailwind CSS v3.4 onward (and likewise in v4).

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-3 grid grid-cols-subgrid">
    <div>Sub 1</div>
    <div>Sub 2</div>
    <div>Sub 3</div>
  </div>
</div>

Subgrid is especially useful when you want to align the height of multiple child elements, as in a card list.

<!-- Align the footer height within a card list -->
<div class="grid grid-cols-3 gap-6">
  <div class="grid grid-rows-subgrid row-span-3">
    <h3 class="text-lg font-bold">Title</h3>
    <p class="text-gray-600">Description (aligns even when the lengths differ)</p>
    <a href="#" class="text-blue-500">Read more →</a>
  </div>
  <!-- Other cards have the same structure -->
</div>

Practical examples​

Dashboard layout​

<div class="grid grid-cols-4 grid-rows-3 gap-4 h-screen p-4">
  <!-- Header -->
  <header class="col-span-4 bg-white rounded-lg shadow-sm p-4">
    Header
  </header>

  <!-- Sidebar -->
  <aside class="row-span-2 bg-white rounded-lg shadow-sm p-4">
    Sidebar
  </aside>

  <!-- Main content -->
  <main class="col-span-3 bg-white rounded-lg shadow-sm p-4">
    Main content
  </main>

  <!-- Footer -->
  <footer class="col-span-3 bg-white rounded-lg shadow-sm p-4">
    Footer
  </footer>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
  <div class="bg-white rounded-lg shadow-sm overflow-hidden">
    <img src="..." class="w-full h-48 object-cover" />
    <div class="p-4">
      <h3 class="font-bold">Card 1</h3>
      <p class="text-gray-600">Description...</p>
    </div>
  </div>
  <!-- Repeat -->
</div>

Image grid​

<div class="grid grid-cols-4 gap-2">
  <div class="col-span-2 row-span-2">
    <img src="..." class="w-full h-full object-cover" />
  </div>
  <div>
    <img src="..." class="w-full h-full object-cover" />
  </div>
  <div>
    <img src="..." class="w-full h-full object-cover" />
  </div>
  <div>
    <img src="..." class="w-full h-full object-cover" />
  </div>
  <div>
    <img src="..." class="w-full h-full object-cover" />
  </div>
</div>

Flexbox vs Grid​

Use caseRecommended
One-dimensional layout (rows or columns)Flexbox
Two-dimensional layout (rows and columns)Grid
Content-based sizingFlexbox
Strict grid placementGrid
Navigation, button groupsFlexbox
Card gallery, dashboardGrid

Summary​

  • Use grid and grid-cols-* for grid layouts
  • Use col-span-* / row-span-* to merge cells
  • Use place-items-* to align items
  • Use gap to set spacing
  • Combine with responsive design for flexible layouts