EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Tailwind CSS Grid Layout: Grid Containers and Row/Column Control

Grid Container and Column Definitions

Grid is a two-dimensional layout model. Use grid to create a grid container and grid-cols-* to define the number of columns.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Container and Column Definitions Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- grid-cols-2 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grid-cols-2</h3>
      <div class="grid grid-cols-2 gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-blue-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-blue-700 text-white p-4 rounded text-center">3</div>
        <div class="bg-blue-800 text-white p-4 rounded text-center">4</div>
      </div>
    </div>

    <!-- grid-cols-3 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grid-cols-3</h3>
      <div class="grid grid-cols-3 gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-green-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-green-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-green-700 text-white p-4 rounded text-center">3</div>
        <div class="bg-green-800 text-white p-4 rounded text-center">4</div>
        <div class="bg-green-900 text-white p-4 rounded text-center">5</div>
        <div class="bg-green-950 text-white p-4 rounded text-center">6</div>
      </div>
    </div>

    <!-- grid-cols-4 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grid-cols-4</h3>
      <div class="grid grid-cols-4 gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-purple-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-purple-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-purple-700 text-white p-4 rounded text-center">3</div>
        <div class="bg-purple-800 text-white p-4 rounded text-center">4</div>
        <div class="bg-purple-900 text-white p-4 rounded text-center">5</div>
        <div class="bg-purple-950 text-white p-4 rounded text-center">6</div>
        <div class="bg-purple-500 text-white p-4 rounded text-center">7</div>
        <div class="bg-purple-600 text-white p-4 rounded text-center">8</div>
      </div>
    </div>

    <!-- Responsive columns -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Responsive: grid-cols-1 md:grid-cols-2 lg:grid-cols-3</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-orange-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-orange-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-orange-700 text-white p-4 rounded text-center">3</div>
        <div class="bg-orange-800 text-white p-4 rounded text-center">4</div>
        <div class="bg-orange-900 text-white p-4 rounded text-center">5</div>
        <div class="bg-orange-950 text-white p-4 rounded text-center">6</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Grid column class reference:

Class CSS Value Description
grid-cols-1 grid-template-columns: repeat(1, minmax(0, 1fr)) 1 column
grid-cols-2 grid-template-columns: repeat(2, minmax(0, 1fr)) 2 columns
grid-cols-3 grid-template-columns: repeat(3, minmax(0, 1fr)) 3 columns
grid-cols-4 grid-template-columns: repeat(4, minmax(0, 1fr)) 4 columns
grid-cols-12 grid-template-columns: repeat(12, minmax(0, 1fr)) 12 columns (classic grid)
grid-cols-none grid-template-columns: none No fixed columns

Traditional CSS vs Tailwind The traditional approach requires setting display: grid and grid-template-columns in CSS, while Tailwind uses utility classes like grid and grid-cols-3 directly in HTML.

💡 Tip: grid-cols-12 is the classic 12-column grid system. Combined with col-span-*, you can flexibly compose layouts of various widths.

Row Definitions (grid-rows)

grid-rows-* defines the number and height of grid rows.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Row Definitions Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- grid-rows-3 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grid-rows-3</h3>
      <div class="grid grid-cols-3 grid-rows-3 gap-4 bg-gray-100 p-4 rounded h-64">
        <div class="bg-blue-500 text-white p-2 rounded text-center text-sm">1,1</div>
        <div class="bg-blue-600 text-white p-2 rounded text-center text-sm">1,2</div>
        <div class="bg-blue-700 text-white p-2 rounded text-center text-sm">1,3</div>
        <div class="bg-blue-800 text-white p-2 rounded text-center text-sm">2,1</div>
        <div class="bg-blue-900 text-white p-2 rounded text-center text-sm">2,2</div>
        <div class="bg-blue-950 text-white p-2 rounded text-center text-sm">2,3</div>
        <div class="bg-blue-500 text-white p-2 rounded text-center text-sm">3,1</div>
        <div class="bg-blue-600 text-white p-2 rounded text-center text-sm">3,2</div>
        <div class="bg-blue-700 text-white p-2 rounded text-center text-sm">3,3</div>
      </div>
    </div>

    <!-- Custom row heights -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grid-rows-[auto_1fr_auto] (Header-Content-Footer)</h3>
      <div class="grid grid-rows-[auto_1fr_auto] gap-4 bg-gray-100 p-4 rounded h-64">
        <div class="bg-green-500 text-white p-4 rounded text-center">Header (auto)</div>
        <div class="bg-green-600 text-white p-4 rounded text-center">Content (1fr)</div>
        <div class="bg-green-700 text-white p-4 rounded text-center">Footer (auto)</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires setting grid-template-rows in CSS, while Tailwind uses utility classes like grid-rows-3 directly in HTML. For custom row heights, use the arbitrary value syntax grid-rows-[auto_1fr_auto].

Column Spanning (col-span)

col-span-* makes grid items span across multiple columns.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Column Spanning Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Classic layout -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Classic Three-Column Layout (col-span)</h3>
      <div class="grid grid-cols-12 gap-4 bg-gray-100 p-4 rounded">
        <div class="col-span-12 bg-blue-600 text-white p-4 rounded text-center">Header (col-span-12)</div>
        <div class="col-span-3 bg-blue-500 text-white p-4 rounded text-center">Sidebar (col-span-3)</div>
        <div class="col-span-6 bg-blue-700 text-white p-4 rounded text-center">Main Content (col-span-6)</div>
        <div class="col-span-3 bg-blue-500 text-white p-4 rounded text-center">Sidebar (col-span-3)</div>
        <div class="col-span-12 bg-blue-600 text-white p-4 rounded text-center">Footer (col-span-12)</div>
      </div>
    </div>

    <!-- Mixed spans -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Mixed Spans</h3>
      <div class="grid grid-cols-4 gap-4 bg-gray-100 p-4 rounded">
        <div class="col-span-2 bg-green-500 text-white p-4 rounded text-center">col-span-2</div>
        <div class="col-span-1 bg-green-600 text-white p-4 rounded text-center">col-span-1</div>
        <div class="col-span-1 bg-green-700 text-white p-4 rounded text-center">col-span-1</div>
        <div class="col-span-1 bg-green-800 text-white p-4 rounded text-center">col-span-1</div>
        <div class="col-span-3 bg-green-900 text-white p-4 rounded text-center">col-span-3</div>
      </div>
    </div>

    <!-- col-span-full -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">col-span-full (Span All Columns)</h3>
      <div class="grid grid-cols-3 gap-4 bg-gray-100 p-4 rounded">
        <div class="col-span-full bg-purple-600 text-white p-4 rounded text-center">col-span-full</div>
        <div class="bg-purple-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-purple-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-purple-700 text-white p-4 rounded text-center">3</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires setting grid-column: span 2 / span 2 in CSS, while Tailwind uses col-span-2 directly in HTML. col-span-full is equivalent to spanning all columns.

Row Spanning (row-span)

row-span-* makes grid items span across multiple rows.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Row Spanning Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- row-span -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">row-span Example</h3>
      <div class="grid grid-cols-3 grid-rows-3 gap-4 bg-gray-100 p-4 rounded h-64">
        <div class="row-span-3 bg-blue-500 text-white p-4 rounded text-center flex items-center justify-center">row-span-3</div>
        <div class="bg-blue-600 text-white p-4 rounded text-center">1,2</div>
        <div class="bg-blue-700 text-white p-4 rounded text-center">1,3</div>
        <div class="bg-blue-800 text-white p-4 rounded text-center">2,2</div>
        <div class="bg-blue-900 text-white p-4 rounded text-center">2,3</div>
        <div class="bg-blue-600 text-white p-4 rounded text-center">3,2</div>
        <div class="bg-blue-700 text-white p-4 rounded text-center">3,3</div>
      </div>
    </div>

    <!-- Practical application: Dashboard layout -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Dashboard Layout</h3>
      <div class="grid grid-cols-4 grid-rows-3 gap-4 bg-gray-100 p-4 rounded h-80">
        <div class="col-span-4 bg-green-600 text-white p-4 rounded text-center flex items-center justify-center">Navbar (col-span-4)</div>
        <div class="row-span-2 bg-green-500 text-white p-4 rounded text-center flex items-center justify-center">Sidebar (row-span-2)</div>
        <div class="col-span-3 bg-green-700 text-white p-4 rounded text-center flex items-center justify-center">Main Content (col-span-3)</div>
        <div class="col-span-3 bg-green-800 text-white p-4 rounded text-center flex items-center justify-center">Footer (col-span-3)</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires setting grid-row: span 3 / span 3 in CSS, while Tailwind uses row-span-3 directly in HTML.

💡 Tip: Combining col-span-* and row-span-* allows you to create complex grid layouts like dashboards, magazine-style pages, and more.

Grid Line Positioning (col-start/row-start)

col-start-* and row-start-* allow items to be placed precisely at specified grid line positions.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Line Positioning Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- col-start -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">col-start Positioning</h3>
      <div class="grid grid-cols-6 gap-4 bg-gray-100 p-4 rounded">
        <div class="col-start-1 col-end-3 bg-blue-500 text-white p-4 rounded text-center">col-start-1 col-end-3</div>
        <div class="col-start-4 col-end-7 bg-blue-700 text-white p-4 rounded text-center">col-start-4 col-end-7</div>
        <div class="col-start-2 col-span-4 bg-blue-600 text-white p-4 rounded text-center">col-start-2 col-span-4</div>
      </div>
    </div>

    <!-- row-start -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">row-start Positioning</h3>
      <div class="grid grid-cols-3 grid-rows-3 gap-4 bg-gray-100 p-4 rounded h-64">
        <div class="row-start-1 row-end-3 bg-green-500 text-white p-4 rounded text-center flex items-center justify-center">row-start-1 row-end-3</div>
        <div class="row-start-2 col-start-2 col-span-2 bg-green-700 text-white p-4 rounded text-center flex items-center justify-center">row-start-2 col-start-2</div>
        <div class="row-start-3 col-start-2 col-span-2 bg-green-800 text-white p-4 rounded text-center flex items-center justify-center">row-start-3 col-start-2</div>
      </div>
    </div>

    <!-- Precise placement -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Precise Grid Item Placement</h3>
      <div class="grid grid-cols-4 grid-rows-4 gap-4 bg-gray-100 p-4 rounded h-64">
        <div class="col-start-1 row-start-1 bg-purple-500 text-white p-2 rounded text-center text-sm">(1,1)</div>
        <div class="col-start-3 row-start-1 bg-purple-600 text-white p-2 rounded text-center text-sm">(3,1)</div>
        <div class="col-start-2 row-start-2 col-span-2 row-span-2 bg-purple-700 text-white p-2 rounded text-center text-sm flex items-center justify-center">(2,2) span 2x2</div>
        <div class="col-start-4 row-start-3 bg-purple-800 text-white p-2 rounded text-center text-sm">(4,3)</div>
        <div class="col-start-1 row-start-4 col-span-4 bg-purple-900 text-white p-2 rounded text-center text-sm">Bottom Full Width</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Grid line positioning class reference:

Class CSS Value Description
col-start-1 grid-column-start: 1 Start at column line 1
col-end-3 grid-column-end: 3 End at column line 3
col-span-2 grid-column: span 2 / span 2 Span 2 columns
row-start-1 grid-row-start: 1 Start at row line 1
row-end-3 grid-row-end: 3 End at row line 3
row-span-2 grid-row: span 2 / span 2 Span 2 rows

Traditional CSS vs Tailwind The traditional approach requires setting grid-column-start, grid-column-end, etc. in CSS, while Tailwind uses utility classes like col-start-1 and col-end-3 directly in HTML.

⚠️ Note: Grid lines are numbered starting from 1. col-start-1 means starting at the first column line, and col-end-3 means ending at the third column line (spanning 2 columns).

Gap Control

Grid layout also uses gap-* to control spacing between rows and columns.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Gap Control Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- gap -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">gap-4 (Uniform Spacing)</h3>
      <div class="grid grid-cols-3 gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-blue-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-blue-700 text-white p-4 rounded text-center">3</div>
        <div class="bg-blue-800 text-white p-4 rounded text-center">4</div>
        <div class="bg-blue-900 text-white p-4 rounded text-center">5</div>
        <div class="bg-blue-950 text-white p-4 rounded text-center">6</div>
      </div>
    </div>

    <!-- gap-x gap-y -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">gap-x-8 gap-y-2 (Independent Control)</h3>
      <div class="grid grid-cols-3 gap-x-8 gap-y-2 bg-gray-100 p-4 rounded">
        <div class="bg-green-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-green-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-green-700 text-white p-4 rounded text-center">3</div>
        <div class="bg-green-800 text-white p-4 rounded text-center">4</div>
        <div class="bg-green-900 text-white p-4 rounded text-center">5</div>
        <div class="bg-green-950 text-white p-4 rounded text-center">6</div>
      </div>
    </div>

    <!-- Different gap sizes -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Different Gap Sizes</h3>
      <div class="space-y-4">
        <div>
          <p class="text-sm text-gray-600 mb-2">gap-1 (4px)</p>
          <div class="grid grid-cols-4 gap-1 bg-gray-100 p-4 rounded">
            <div class="bg-purple-500 text-white p-2 rounded text-center text-sm">1</div>
            <div class="bg-purple-600 text-white p-2 rounded text-center text-sm">2</div>
            <div class="bg-purple-700 text-white p-2 rounded text-center text-sm">3</div>
            <div class="bg-purple-800 text-white p-2 rounded text-center text-sm">4</div>
          </div>
        </div>
        <div>
          <p class="text-sm text-gray-600 mb-2">gap-8 (32px)</p>
          <div class="grid grid-cols-4 gap-8 bg-gray-100 p-4 rounded">
            <div class="bg-purple-500 text-white p-2 rounded text-center text-sm">1</div>
            <div class="bg-purple-600 text-white p-2 rounded text-center text-sm">2</div>
            <div class="bg-purple-700 text-white p-2 rounded text-center text-sm">3</div>
            <div class="bg-purple-800 text-white p-2 rounded text-center text-sm">4</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires setting column-gap and row-gap in CSS, while Tailwind uses gap-x-8 and gap-y-2 directly in HTML. gap-4 sets spacing for both directions at once.

Grid Flow Direction (grid-flow)

grid-flow-* controls the direction of the auto-placement algorithm.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Flow Direction Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- grid-flow-row -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grid-flow-row (Default)</h3>
      <div class="grid grid-cols-3 grid-flow-row gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-blue-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-blue-700 text-white p-4 rounded text-center">3</div>
        <div class="bg-blue-800 text-white p-4 rounded text-center">4</div>
        <div class="bg-blue-900 text-white p-4 rounded text-center">5</div>
      </div>
    </div>

    <!-- grid-flow-col -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grid-flow-col</h3>
      <div class="grid grid-rows-3 grid-flow-col gap-4 bg-gray-100 p-4 rounded h-48">
        <div class="bg-green-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-green-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-green-700 text-white p-4 rounded text-center">3</div>
        <div class="bg-green-800 text-white p-4 rounded text-center">4</div>
        <div class="bg-green-900 text-white p-4 rounded text-center">5</div>
      </div>
    </div>

    <!-- grid-flow-dense -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grid-flow-dense (Fill Gaps)</h3>
      <div class="grid grid-cols-4 grid-flow-dense gap-4 bg-gray-100 p-4 rounded">
        <div class="col-span-2 bg-purple-500 text-white p-4 rounded text-center">col-span-2</div>
        <div class="bg-purple-600 text-white p-4 rounded text-center">1</div>
        <div class="bg-purple-700 text-white p-4 rounded text-center">2</div>
        <div class="col-span-2 bg-purple-800 text-white p-4 rounded text-center">col-span-2</div>
        <div class="bg-purple-900 text-white p-4 rounded text-center">3</div>
        <div class="bg-purple-600 text-white p-4 rounded text-center">4</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires setting grid-auto-flow in CSS, while Tailwind uses utility classes like grid-flow-row, grid-flow-col, and grid-flow-dense directly in HTML.

💡 Tip: grid-flow-dense attempts to fill gaps in the grid, making it suitable for masonry-style layouts and similar scenarios.

Auto-Sizing (auto-cols/auto-rows)

auto-cols-* and auto-rows-* control the size of implicit grid tracks.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Auto-Sizing Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- auto-cols-min -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">auto-cols-min</h3>
      <div class="grid grid-flow-col auto-cols-min gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white px-2 py-4 rounded text-center">Short</div>
        <div class="bg-blue-600 text-white px-4 py-4 rounded text-center">Medium</div>
        <div class="bg-blue-700 text-white px-6 py-4 rounded text-center">Longer content</div>
      </div>
    </div>

    <!-- auto-cols-max -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">auto-cols-max</h3>
      <div class="grid grid-flow-col auto-cols-max gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-green-500 text-white px-2 py-4 rounded text-center">Short</div>
        <div class="bg-green-600 text-white px-4 py-4 rounded text-center">Medium</div>
        <div class="bg-green-700 text-white px-6 py-4 rounded text-center">Longer content</div>
      </div>
    </div>

    <!-- auto-cols-fr -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">auto-cols-fr (Equal Space)</h3>
      <div class="grid grid-flow-col auto-cols-fr gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-purple-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-purple-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-purple-700 text-white p-4 rounded text-center">3</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Auto-sizing class reference:

Class CSS Value Description
auto-cols-min grid-auto-columns: min-content Minimum content width
auto-cols-max grid-auto-columns: max-content Maximum content width
auto-cols-fr grid-auto-columns: minmax(0, 1fr) Equal space
auto-cols-auto grid-auto-columns: auto Auto (default)
auto-rows-min grid-auto-rows: min-content Minimum content height
auto-rows-max grid-auto-rows: max-content Maximum content height
auto-rows-fr grid-auto-rows: minmax(0, 1fr) Equal height
auto-rows-auto grid-auto-rows: auto Auto (default)

Traditional CSS vs Tailwind The traditional approach requires setting grid-auto-columns and grid-auto-rows in CSS, while Tailwind uses utility classes like auto-cols-min and auto-rows-fr directly in HTML.

Alignment Control

Grid layout provides multi-level alignment control: justify-items/items/place-items control how items are aligned within their grid cells.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Alignment Control Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- justify-items -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-items-center (Horizontal Center)</h3>
      <div class="grid grid-cols-3 justify-items-center gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white px-2 py-4 rounded w-20 text-center">1</div>
        <div class="bg-blue-600 text-white px-2 py-4 rounded w-20 text-center">2</div>
        <div class="bg-blue-700 text-white px-2 py-4 rounded w-20 text-center">3</div>
      </div>
    </div>

    <!-- items -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">items-center (Vertical Center)</h3>
      <div class="grid grid-cols-3 items-center gap-4 bg-gray-100 p-4 rounded h-32">
        <div class="bg-green-500 text-white px-4 py-2 rounded text-center">Short</div>
        <div class="bg-green-600 text-white px-4 py-6 rounded text-center">Tall</div>
        <div class="bg-green-700 text-white px-4 py-4 rounded text-center">Medium</div>
      </div>
    </div>

    <!-- place-items -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">place-items-center (Horizontal & Vertical Center)</h3>
      <div class="grid grid-cols-3 place-items-center gap-4 bg-gray-100 p-4 rounded h-32">
        <div class="bg-purple-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-purple-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-purple-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>

    <!-- justify-items-stretch -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-items-stretch (Default)</h3>
      <div class="grid grid-cols-3 justify-items-stretch gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-orange-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-orange-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-orange-700 text-white p-4 rounded text-center">3</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Alignment class reference:

Class CSS Value Description
justify-items-start justify-items: start Align to horizontal start
justify-items-center justify-items: center Horizontally centered
justify-items-end justify-items: end Align to horizontal end
justify-items-stretch justify-items: stretch Stretch to fill horizontally
items-start align-items: start Align to vertical start
items-center align-items: center Vertically centered
items-end align-items: end Align to vertical end
items-stretch align-items: stretch Stretch to fill vertically
place-items-center place-items: center Horizontally & vertically centered
place-items-stretch place-items: stretch Stretch to fill both axes

Traditional CSS vs Tailwind The traditional approach requires setting justify-items and align-items separately in CSS, while Tailwind achieves horizontal and vertical centering with a single place-items-center class.

💡 Tip: place-items-center is the most commonly used centering solution, and is more concise than Flexbox's items-center justify-center.

Comprehensive Example

Combining all the concepts above, let's create a complete Grid layout.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Comprehensive Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-6xl mx-auto space-y-8">
    <!-- Dashboard layout -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Dashboard Layout</h3>
      <div class="grid grid-cols-4 grid-rows-4 gap-4 bg-gray-100 p-4 rounded h-96">
        <!-- Top navigation -->
        <div class="col-span-4 bg-blue-600 text-white p-4 rounded flex items-center justify-between">
          <span class="font-bold">Dashboard</span>
          <span>User Avatar</span>
        </div>
        <!-- Sidebar -->
        <div class="row-span-3 bg-blue-500 text-white p-4 rounded">
          <nav class="space-y-2">
            <div class="p-2 bg-blue-400 rounded">Overview</div>
            <div class="p-2 hover:bg-blue-400 rounded">Analytics</div>
            <div class="p-2 hover:bg-blue-400 rounded">Settings</div>
          </nav>
        </div>
        <!-- Stat cards -->
        <div class="bg-green-500 text-white p-4 rounded flex flex-col justify-center">
          <div class="text-2xl font-bold">1,234</div>
          <div class="text-sm">Total Users</div>
        </div>
        <div class="bg-green-600 text-white p-4 rounded flex flex-col justify-center">
          <div class="text-2xl font-bold">567</div>
          <div class="text-sm">Active Users</div>
        </div>
        <div class="bg-green-700 text-white p-4 rounded flex flex-col justify-center">
          <div class="text-2xl font-bold">89%</div>
          <div class="text-sm">Growth Rate</div>
        </div>
        <!-- Main content -->
        <div class="col-span-3 row-span-2 bg-white p-4 rounded border">
          <h4 class="font-semibold mb-2">Data Chart</h4>
          <div class="h-full bg-gray-50 rounded flex items-center justify-center text-gray-400">
            Chart Area
          </div>
        </div>
      </div>
    </div>

    <!-- Magazine-style layout -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Magazine-Style Layout</h3>
      <div class="grid grid-cols-4 gap-4 bg-gray-100 p-4 rounded">
        <div class="col-span-2 row-span-2 bg-gradient-to-br from-purple-500 to-purple-700 text-white p-6 rounded flex flex-col justify-end">
          <h3 class="text-2xl font-bold mb-2">Headline Story</h3>
          <p class="text-sm opacity-90">This is the most important news content</p>
        </div>
        <div class="bg-orange-500 text-white p-4 rounded">
          <h4 class="font-semibold mb-2">News 2</h4>
          <p class="text-sm">Brief description...</p>
        </div>
        <div class="bg-orange-600 text-white p-4 rounded">
          <h4 class="font-semibold mb-2">News 3</h4>
          <p class="text-sm">Brief description...</p>
        </div>
        <div class="bg-orange-700 text-white p-4 rounded">
          <h4 class="font-semibold mb-2">News 4</h4>
          <p class="text-sm">Brief description...</p>
        </div>
        <div class="bg-orange-800 text-white p-4 rounded">
          <h4 class="font-semibold mb-2">News 5</h4>
          <p class="text-sm">Brief description...</p>
        </div>
      </div>
    </div>

    <!-- Responsive grid -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Responsive Grid</h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white p-6 rounded text-center">1</div>
        <div class="bg-blue-600 text-white p-6 rounded text-center">2</div>
        <div class="bg-blue-700 text-white p-6 rounded text-center">3</div>
        <div class="bg-blue-800 text-white p-6 rounded text-center">4</div>
        <div class="bg-blue-900 text-white p-6 rounded text-center">5</div>
        <div class="bg-blue-950 text-white p-6 rounded text-center">6</div>
        <div class="bg-blue-500 text-white p-6 rounded text-center">7</div>
        <div class="bg-blue-600 text-white p-6 rounded text-center">8</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires writing extensive CSS for complex layouts like dashboards and magazine-style pages, while Tailwind accomplishes this directly in HTML using grid utility classes, flexibly combined with col-span-* and row-span-*.

❓ FAQ

Q When should I use Grid vs Flexbox?
A Use Flexbox for one-dimensional layouts (single row or column), and Grid for two-dimensional layouts (rows and columns). Navbars and card lists work well with Flexbox; dashboards and image grids work well with Grid. The two can be nested together.
Q What's the difference between grid-cols-12 and grid-cols-3?
A grid-cols-12 creates a 12-column grid that requires col-span-* to define item widths. grid-cols-3 creates a simple 3-column equal-width grid. The former is more flexible, the latter is simpler.
Q How do I create a responsive grid?
A Use responsive prefixes like grid-cols-1 md:grid-cols-2 lg:grid-cols-3 to switch column counts at different breakpoints. You can also use auto-fill and minmax() for automatic responsiveness.
Q What's the difference between gap and padding?
A gap controls spacing between grid items and does not include outer margins. padding controls the container's inner padding, wrapping all items. They are typically used together: gap for item spacing and padding for container margins.

📖 Summary

📝 Exercises

  1. ⭐ Create a 3-column equal-width grid layout using grid grid-cols-3 gap-4 to display 6 cards

  2. ⭐⭐ Create a classic 12-column grid layout with a header (col-span-12), sidebar (col-span-3), main content (col-span-6), and footer (col-span-12)

  3. ⭐⭐⭐ Create a dashboard layout using grid-cols-4 grid-rows-4 with a top navigation bar (col-span-4), sidebar (row-span-3), stat cards, and a main content area

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏