Tailwind CSS

CSS Grid Utilities

25 min Lesson 9 of 35

Mastering CSS Grid with Tailwind CSS

CSS Grid is the most powerful layout system in CSS, perfect for creating two-dimensional layouts. While Flexbox excels at one-dimensional layouts, Grid shines when you need to control both rows and columns simultaneously. Tailwind makes Grid incredibly intuitive to use.

Creating Grid Containers

Transform an element into a grid container with the grid utility:

Basic Grid Setup

<!-- Create a grid container -->
<div class="grid">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Inline grid container -->
<div class="inline-grid">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Simple 3-column grid -->
<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-100 p-4">Column 1</div>
  <div class="bg-blue-100 p-4">Column 2</div>
  <div class="bg-blue-100 p-4">Column 3</div>
  <div class="bg-blue-100 p-4">Column 4</div>
  <div class="bg-blue-100 p-4">Column 5</div>
  <div class="bg-blue-100 p-4">Column 6</div>
</div>

Grid vs Flexbox: Use Grid when you need two-dimensional control (rows AND columns). Use Flexbox for one-dimensional layouts (either rows OR columns). Grid is perfect for page layouts, image galleries, and card grids.

Grid Template Columns

Define the number and size of columns in your grid:

Column Utilities

<!-- Single column -->
<div class="grid grid-cols-1">
  <div>Full width</div>
</div>

<!-- Two columns -->
<div class="grid grid-cols-2 gap-4">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

<!-- Three columns -->
<div class="grid grid-cols-3 gap-4">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

<!-- Four columns -->
<div class="grid grid-cols-4 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<!-- Up to 12 columns -->
<div class="grid grid-cols-12 gap-2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <!-- ... up to 12 -->
</div>

<!-- None (disable grid columns) -->
<div class="grid-cols-none">No column template</div>

<!-- Subgrid (uses parent grid definition) -->
<div class="grid-cols-subgrid">Inherits parent grid columns</div>

Product Grid Example

<div class="grid grid-cols-4 gap-6 p-6">
  <div class="bg-white rounded-lg shadow p-4">
    <img src="product1.jpg" class="w-full h-48 object-cover rounded mb-4" alt="Product 1">
    <h3 class="font-bold mb-2">Product Name</h3>
    <p class="text-gray-600 mb-2">$29.99</p>
    <button class="w-full py-2 bg-blue-500 text-white rounded">Add to Cart</button>
  </div>
  <!-- Repeat for more products -->
</div>

Grid Template Rows

Control the number and size of rows in your grid:

Row Utilities

<!-- Single row (default) -->
<div class="grid grid-rows-1">
  <div>Single row</div>
</div>

<!-- Two rows -->
<div class="grid grid-rows-2 grid-cols-2 gap-4 h-64">
  <div>Row 1, Col 1</div>
  <div>Row 1, Col 2</div>
  <div>Row 2, Col 1</div>
  <div>Row 2, Col 2</div>
</div>

<!-- Three rows -->
<div class="grid grid-rows-3 gap-4">
  <div class="bg-blue-100">Row 1</div>
  <div class="bg-blue-200">Row 2</div>
  <div class="bg-blue-300">Row 3</div>
</div>

<!-- Up to 6 rows -->
<div class="grid grid-rows-6 gap-2">
  <!-- Items... -->
</div>

<!-- Dashboard layout with defined rows -->
<div class="grid grid-rows-[auto_1fr_auto] h-screen">
  <header class="bg-white shadow p-4">Header</header>
  <main class="overflow-y-auto p-4">Main Content</main>
  <footer class="bg-gray-800 text-white p-4">Footer</footer>
</div>

Combining Rows and Columns: You can specify both grid-rows and grid-cols on the same container to create complex two-dimensional layouts. The items will flow into the grid cells automatically.

Column Span

Make grid items span multiple columns:

Column Spanning

<div class="grid grid-cols-6 gap-4">
  <!-- Span 1 column (default) -->
  <div class="col-span-1 bg-blue-100 p-4">Span 1</div>

  <!-- Span 2 columns -->
  <div class="col-span-2 bg-blue-200 p-4">Span 2</div>

  <!-- Span 3 columns -->
  <div class="col-span-3 bg-blue-300 p-4">Span 3</div>

  <!-- Span 4 columns -->
  <div class="col-span-4 bg-blue-400 p-4">Span 4</div>

  <!-- Span full width -->
  <div class="col-span-full bg-blue-500 p-4 text-white">Full Width</div>

  <!-- Auto span (fit content) -->
  <div class="col-auto bg-blue-100 p-4">Auto</div>
</div>

Magazine Layout Example

<div class="grid grid-cols-12 gap-6 p-6">
  <!-- Featured article spans 8 columns -->
  <article class="col-span-8 bg-white rounded-lg shadow p-6">
    <img src="featured.jpg" class="w-full h-64 object-cover rounded mb-4" alt="Featured">
    <h2 class="text-3xl font-bold mb-4">Featured Article</h2>
    <p class="text-gray-600">Article content...</p>
  </article>

  <!-- Sidebar spans 4 columns -->
  <aside class="col-span-4 space-y-4">
    <div class="bg-white rounded-lg shadow p-4">
      <h3 class="font-bold mb-2">Popular Posts</h3>
      <!-- List of posts -->
    </div>
    <div class="bg-white rounded-lg shadow p-4">
      <h3 class="font-bold mb-2">Categories</h3>
      <!-- List of categories -->
    </div>
  </aside>

  <!-- Related articles, each spans 4 columns -->
  <article class="col-span-4 bg-white rounded-lg shadow p-4">
    <h3 class="font-bold">Related Article 1</h3>
  </article>
  <article class="col-span-4 bg-white rounded-lg shadow p-4">
    <h3 class="font-bold">Related Article 2</h3>
  </article>
  <article class="col-span-4 bg-white rounded-lg shadow p-4">
    <h3 class="font-bold">Related Article 3</h3>
  </article>
</div>

Column Start and End

Precisely position items by specifying start and end columns:

Column Positioning

<div class="grid grid-cols-6 gap-4">
  <!-- Start at column 1, auto end -->
  <div class="col-start-1 bg-blue-100 p-4">Start 1</div>

  <!-- Start at column 2, end at column 4 -->
  <div class="col-start-2 col-end-4 bg-blue-200 p-4">Start 2, End 4</div>

  <!-- Start at column 4, end at last column -->
  <div class="col-start-4 col-end-7 bg-blue-300 p-4">Start 4, End 7</div>

  <!-- Auto positioning -->
  <div class="col-auto bg-blue-100 p-4">Auto</div>
</div>

<!-- Complex layout with overlapping -->
<div class="grid grid-cols-4 grid-rows-3 gap-4">
  <div class="col-start-1 col-end-3 row-start-1 row-end-3 bg-blue-500 text-white p-4">
    Large Box
  </div>
  <div class="col-start-3 col-end-5 bg-blue-200 p-4">Box 2</div>
  <div class="col-start-3 bg-blue-300 p-4">Box 3</div>
  <div class="col-start-4 bg-blue-400 p-4">Box 4</div>
</div>

Row Span

Make grid items span multiple rows:

Row Spanning

<div class="grid grid-cols-3 grid-rows-4 gap-4 h-96">
  <!-- Span 1 row (default) -->
  <div class="row-span-1 bg-green-100 p-4">Span 1 Row</div>

  <!-- Span 2 rows -->
  <div class="row-span-2 bg-green-200 p-4">Span 2 Rows</div>

  <!-- Span 3 rows -->
  <div class="row-span-3 bg-green-300 p-4">Span 3 Rows</div>

  <!-- Span full height -->
  <div class="row-span-full bg-green-400 p-4">Full Height</div>

  <!-- Auto span -->
  <div class="row-auto bg-green-100 p-4">Auto</div>
</div>

Dashboard Layout with Row Spans

<div class="grid grid-cols-4 grid-rows-3 gap-4 h-screen p-4">
  <!-- Sidebar spans all rows -->
  <aside class="row-span-full bg-gray-800 text-white rounded-lg p-4">
    <h2 class="text-xl font-bold mb-4">Navigation</h2>
    <nav class="space-y-2">
      <a href="#" class="block p-2 rounded hover:bg-gray-700">Dashboard</a>
      <a href="#" class="block p-2 rounded hover:bg-gray-700">Analytics</a>
      <a href="#" class="block p-2 rounded hover:bg-gray-700">Settings</a>
    </nav>
  </aside>

  <!-- Stats cards span 1 row each -->
  <div class="col-span-3 bg-white rounded-lg shadow p-6">
    <h3 class="text-sm text-gray-600 mb-2">Total Revenue</h3>
    <p class="text-3xl font-bold">$45,231</p>
  </div>

  <!-- Chart spans 2 rows -->
  <div class="col-span-3 row-span-2 bg-white rounded-lg shadow p-6">
    <h3 class="text-xl font-bold mb-4">Sales Chart</h3>
    <div class="h-full bg-gray-100 rounded flex items-center justify-center">
      Chart placeholder
    </div>
  </div>
</div>

Grid Height Requirement: When using row spans, make sure your grid container has a defined height (h-screen, h-96, etc.). Without a height, rows may collapse and spans won't work as expected.

Grid Gap

Add spacing between grid items:

Gap Utilities

<!-- Uniform gap (all sides) -->
<div class="grid grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

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

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

<!-- Different horizontal and vertical gaps -->
<div class="grid grid-cols-3 gap-x-4 gap-y-8">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</div>

<!-- Various gap sizes -->
<div class="grid grid-cols-3 gap-0">No gap</div>
<div class="grid grid-cols-3 gap-2">Small gap</div>
<div class="grid grid-cols-3 gap-4">Medium gap</div>
<div class="grid grid-cols-3 gap-8">Large gap</div>

Grid Auto Flow

Control how auto-placed items flow into the grid:

Auto Flow Utilities

<!-- Row flow (default) -->
<div class="grid grid-cols-3 grid-flow-row gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

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

<!-- Dense packing (fills gaps) -->
<div class="grid grid-cols-4 grid-flow-dense gap-4">
  <div class="col-span-2">1 (spans 2)</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div class="col-span-2">5 (spans 2)</div>
</div>

<!-- Row dense -->
<div class="grid-flow-row-dense">Dense row flow</div>

<!-- Column dense -->
<div class="grid-flow-col-dense">Dense column flow</div>

Grid Flow Dense: The grid-flow-dense utility attempts to fill gaps in the grid by placing smaller items in empty spaces, even if it means items appear out of order. Great for masonry-style layouts.

Place Items and Place Content

Control alignment of all items within the grid:

Place Items (align all items)

<!-- Center all items -->
<div class="grid grid-cols-3 gap-4 h-64 place-items-center">
  <div class="bg-blue-100 p-4">Centered</div>
  <div class="bg-blue-100 p-4">Centered</div>
  <div class="bg-blue-100 p-4">Centered</div>
</div>

<!-- Start (top-left) -->
<div class="grid place-items-start">Items at start</div>

<!-- End (bottom-right) -->
<div class="grid place-items-end">Items at end</div>

<!-- Stretch (fill cell) -->
<div class="grid place-items-stretch">Items stretched</div>

Individual Item Positioning

<!-- Justify self (horizontal alignment of single item) -->
<div class="grid grid-cols-3 gap-4">
  <div class="justify-self-start bg-blue-100 p-4">Start</div>
  <div class="justify-self-center bg-blue-100 p-4">Center</div>
  <div class="justify-self-end bg-blue-100 p-4">End</div>
</div>

<!-- Align self (vertical alignment of single item) -->
<div class="grid grid-cols-3 gap-4 h-32">
  <div class="self-start bg-blue-100 p-4">Top</div>
  <div class="self-center bg-blue-100 p-4">Middle</div>
  <div class="self-end bg-blue-100 p-4">Bottom</div>
</div>

<!-- Place self (both horizontal and vertical) -->
<div class="grid grid-cols-2 gap-4 h-64">
  <div class="place-self-start bg-blue-100 p-4">Top-Left</div>
  <div class="place-self-center bg-blue-100 p-4">Center</div>
  <div class="place-self-end bg-blue-100 p-4">Bottom-Right</div>
  <div class="place-self-stretch bg-blue-100 p-4">Stretched</div>
</div>

Responsive Grid Layouts

Mobile-First Responsive Grid

<!-- 1 column on mobile, 2 on tablet, 4 on desktop -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 p-6">
  <div class="bg-white rounded-lg shadow p-4">Card 1</div>
  <div class="bg-white rounded-lg shadow p-4">Card 2</div>
  <div class="bg-white rounded-lg shadow p-4">Card 3</div>
  <div class="bg-white rounded-lg shadow p-4">Card 4</div>
  <div class="bg-white rounded-lg shadow p-4">Card 5</div>
  <div class="bg-white rounded-lg shadow p-4">Card 6</div>
  <div class="bg-white rounded-lg shadow p-4">Card 7</div>
  <div class="bg-white rounded-lg shadow p-4">Card 8</div>
</div>

<!-- Responsive column spans -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
  <main class="lg:col-span-8 bg-white rounded-lg shadow p-6">
    Main content (full width on mobile, 8 cols on desktop)
  </main>
  <aside class="lg:col-span-4 bg-white rounded-lg shadow p-6">
    Sidebar (full width on mobile, 4 cols on desktop)
  </aside>
</div>

<!-- Responsive gap -->
<div class="grid grid-cols-2 gap-2 md:gap-4 lg:gap-6">
  <div>Item</div>
  <div>Item</div>
</div>

Exercise 1: Create a Photo Gallery

Build a responsive photo gallery with:

1 column on mobile, 2 on tablet, 3 on desktop
Each photo in a square aspect ratio container
Gap of 4 units between photos
Overlay with photo title on hover
One featured photo that spans 2 columns on desktop

Exercise 2: Build a Dashboard Layout

Create a dashboard with:

Sidebar that spans full height (row-span-full)
Three stat cards across the top
Large chart area that spans 2 rows and 2 columns
Smaller widgets filling remaining space
Responsive: stack on mobile, grid on desktop

Exercise 3: Design a Magazine-Style Article Grid

Create an article grid with:

12-column grid
Featured article spanning 8 columns
Sidebar spanning 4 columns
Three related articles below, each spanning 4 columns
Appropriate gaps between all items
Mobile: all items full width and stacked

Best Practices for CSS Grid

Grid Guidelines:

Use Grid for two-dimensional layouts: When you need to control both rows and columns
12-column grid for flexibility: Use grid-cols-12 for maximum layout flexibility
Responsive column spans: Adjust col-span at different breakpoints
Gap for spacing: Use gap utilities instead of margins on grid items
Define height for row spans: Grid containers need defined height for row-span to work
Mobile-first approach: Start with grid-cols-1, add columns at larger breakpoints
grid-flow-dense for masonry: Use for Pinterest-style layouts that fill gaps
Combine with Flexbox: Use Grid for overall layout, Flexbox inside grid items

Summary

In this lesson, you've mastered CSS Grid utilities:

Creating grids: grid, inline-grid
Columns: grid-cols-1 through grid-cols-12
Rows: grid-rows-1 through grid-rows-6
Column spanning: col-span-1 through col-span-12, col-span-full
Row spanning: row-span-1 through row-span-6, row-span-full
Positioning: col-start-*, col-end-*, row-start-*, row-end-*
Gap: gap-*, gap-x-*, gap-y-*
Auto flow: grid-flow-row/col/dense
Alignment: place-items-*, justify-self-*, self-*

CSS Grid is essential for modern, complex layouts. In the next lesson, we'll explore responsive design and breakpoints in Tailwind.