Tailwind CSS - Grid Template Columns

Tailwind CSS: Grid Template Columns

CSS Grid is a powerful two-dimensional layout system, and Tailwind’s grid-template-columns utilities make it incredibly intuitive to define the structure of your grid. These utilities, primarily grid-cols-*, allow you to specify the number of columns in a grid layout and how they should be sized.

Core Grid Column Utilities

Class	CSS Properties	Description
grid-cols-1	grid-template-columns: repeat(1, minmax(0, 1fr));	Creates a single column grid.
grid-cols-2	grid-template-columns: repeat(2, minmax(0, 1fr));	Creates a two-column grid with equal-width columns.
…	…	Available up to grid-cols-12.
grid-cols-12	grid-template-columns: repeat(12, minmax(0, 1fr));	Creates a twelve-column grid, a standard in web design.
grid-cols-none	grid-template-columns: none;	Removes an explicit grid column definition.
grid-cols-subgrid	grid-template-columns: subgrid;	Allows a nested grid to align with its parent’s column tracks.

Practical Application: Building a Responsive Product Card Grid

The most common use for grid-cols-* is to create responsive layouts that adapt to different screen sizes. Let’s build a product gallery that shows one column on mobile, two on tablets, and four on desktops.

Project Setup

Follow the same modern project setup described in the Max-Width chapter (using npm, tailwind.config.js, etc.). This ensures your responsive prefixes like sm: and md: will work correctly.

Example: Responsive Product Grid

The key is to combine the grid class with responsive grid-cols-* and gap-* utilities on the container element.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Grid Demo</title>
    <link href="/dist/output.css" rel="stylesheet">
</head>
<body class="bg-slate-50">

    <div class="max-w-7xl mx-auto p-4 sm:p-6 lg:p-8">
        <h1 class="text-3xl font-bold text-slate-900 mb-6">Featured Products</h1>

        <!-- Responsive Grid Container -->
        <div class="grid
            grid-cols-1
            sm:grid-cols-2
            lg:grid-cols-4
            gap-6">

            <!-- Grid Item 1 -->
            <div class="bg-white rounded-lg shadow-md overflow-hidden">
                <div class="h-48 bg-gray-200"></div> <!-- Placeholder for an image -->
                <div class="p-4">
                    <h3 class="font-semibold text-lg">Product Name</h3>
                    <p class="text-gray-600 mt-1">$19.99</p>
                </div>
            </div>

            <!-- Grid Item 2 -->
            <div class="bg-white rounded-lg shadow-md overflow-hidden">
                <div class="h-48 bg-gray-200"></div>
                <div class="p-4">
                    <h3 class="font-semibold text-lg">Another Item</h3>
                    <p class="text-gray-600 mt-1">$24.99</p>
                </div>
            </div>

            <!-- Add 6 more items to see the grid wrap -->
            <!-- ... -->

        </div>
    </div>

</body>
</html>

Explanation

• grid: Establishes the element as a grid container.
• grid-cols-1: This is the mobile-first default. On small screens, items will stack in a single column.
• sm:grid-cols-2: At the sm breakpoint (640px) and up, the layout switches to a two-column grid.
• lg:grid-cols-4: At the lg breakpoint (1024px) and up, it becomes a four-column grid.
• gap-6: This utility adds consistent spacing between all grid items, both horizontally and vertically.

Advanced Technique: Subgrid

subgrid is a newer CSS feature that allows a nested grid to align its tracks with its direct parent grid. This is extremely useful for creating complex layouts where alignment across nested components is critical.

Example: Aligning Nested Content with the Parent Grid

<!-- Parent Grid -->
<div class="grid grid-cols-4 gap-4">
  <div>01</div>

  <!-- This item spans 3 columns and contains a nested subgrid -->
  <div class="col-span-3 grid grid-cols-subgrid gap-4">
    <!-- This item is part of the subgrid. By using col-start-2, -->
    <!-- it aligns with the 3rd column of the original parent grid -->
    <div class="col-start-2 bg-blue-200 p-2 rounded">
      06 (Aligned with parent's 3rd column)
    </div>
  </div>

  <div>03</div>
  <div>04</div>
</div>

Browser Support Note

As of late 2023, subgrid is supported in all major modern browsers (Firefox, Chrome, Edge, Safari). However, always check caniuse.com for the latest compatibility data if you need to support older browser versions.

Debugging Tips

• Grid Not Applying? Ensure the parent element has the grid class. grid-cols-* has no effect without it.
• Using Browser DevTools: Modern browser developer tools have a ‘Grid’ inspector. Use it to visualize your grid lines, gaps, and tracks. It’s an invaluable tool for debugging complex grid layouts.