Ova

How to create a custom grid in Tailwind?

Published in Tailwind Grid Customization 4 mins read

Creating a custom grid in Tailwind CSS is straightforward, primarily involving the grid utility class on a parent container and defining column and row tracks, along with positioning child elements. You achieve custom grids by either using Tailwind's predefined utilities or leveraging arbitrary values for highly specific layouts.

Understanding Tailwind's Grid System

At its core, Tailwind's grid system mirrors CSS Grid Layout. You begin by designating a parent element as a grid container using the grid class. This div (or any block-level element) will house your grid items, which are its direct children.

Consider this basic structure:

<div class="grid ...">
  <!-- Grid Item 1 -->
  <div>Item 1</div>
  <!-- Grid Item 2 -->
  <div>Item 2</div>
  <!-- More grid children -->
</div>

The grid class sets display: grid; on the parent, making its children participate in the grid layout.

Defining Custom Grid Columns and Rows

Tailwind provides several ways to define the structure of your grid.

1. Using Predefined Column and Row Utilities

Tailwind offers a range of utilities for common grid configurations, such as grid-cols-N (where N is 1-12) for columns and grid-rows-N for rows.

  • grid-cols-{number}: Sets a grid with a specific number of equal-width columns.
    • Example: grid-cols-4 creates a 4-column grid.
  • grid-rows-{number}: Sets a grid with a specific number of equal-height rows.
    • Example: grid-rows-3 creates a 3-row grid.
<div class="grid grid-cols-3 gap-4">
  <div class="p-4 bg-blue-200">1</div>
  <div class="p-4 bg-blue-200">2</div>
  <div class="p-4 bg-blue-200">3</div>
  <div class="p-4 bg-blue-200">4</div>
  <div class="p-4 bg-blue-200">5</div>
  <div class="p-4 bg-blue-200">6</div>
</div>

2. Arbitrary Values for Fine-Grained Control

For truly custom grid layouts, Tailwind allows you to define arbitrary values using square brackets []. This directly translates to CSS grid-template-columns and grid-template-rows properties.

  • Custom Column Tracks: Use grid-cols-[...]
    • Define specific widths: grid-cols-[100px_1fr_20%]
    • Using fr (fractional unit) for flexible sizing: grid-cols-[1fr_2fr_1fr]
    • Using repeat() function: grid-cols-[repeat(3,minmax(0,1fr))_auto]
    • Using minmax(): grid-cols-[minmax(100px,_1fr)_200px]
  • Custom Row Tracks: Use grid-rows-[...]
    • Define specific heights: grid-rows-[auto_1fr_auto]
    • Example: grid-rows-[50px_1fr_200px]
<div class="grid grid-cols-[150px_1fr_minmax(100px,_200px)] gap-4 bg-gray-100 p-4">
  <div class="p-4 bg-green-200">Fixed 150px</div>
  <div class="p-4 bg-green-200">Flexible 1fr</div>
  <div class="p-4 bg-green-200">Min 100px, Max 200px</div>
</div>

<div class="grid grid-rows-[auto_1fr_auto] h-64 gap-2 mt-4 bg-gray-100 p-4">
  <div class="p-2 bg-yellow-200">Header (auto height)</div>
  <div class="p-2 bg-yellow-200">Content (1fr, fills space)</div>
  <div class="p-2 bg-yellow-200">Footer (auto height)</div>
</div>

For more details on grid template columns, refer to the Tailwind CSS Grid Template Columns documentation.

3. Managing Gaps Between Grid Items

You can control the space between grid items using gap utilities:

  • gap-{size}: Sets both row and column gaps.
  • gap-x-{size}: Sets horizontal (column) gaps.
  • gap-y-{size}: Sets vertical (row) gaps.
<div class="grid grid-cols-2 gap-x-8 gap-y-4">
  <!-- ... grid items ... -->
</div>

Positioning and Spanning Grid Items

Once your grid tracks are defined, you can control how child items are placed and how many tracks they occupy.

Utility Class Description
col-span-{N} Makes an item span N columns.
row-span-{N} Makes an item span N rows.
col-start-{N} Sets an item's starting column line.
col-end-{N} Sets an item's ending column line.
row-start-{N} Sets an item's starting row line.
row-end-{N} Sets an item's ending row line.
col-auto Allows an item to automatically place and span.
row-auto Allows an item to automatically place and span. 
<div class="grid grid-cols-6 gap-4 bg-teal-100 p-4">
  <div class="col-span-2 p-4 bg-teal-300">Item 1 (span 2 cols)</div>
  <div class="col-span-4 p-4 bg-teal-300">Item 2 (span 4 cols)</div>
  <div class="col-start-2 col-span-3 p-4 bg-teal-300">Item 3 (start col 2, span 3)</div>
  <div class="p-4 bg-teal-300">Item 4</div>
</div>

For comprehensive details on item placement, see the Tailwind CSS Grid Column Start/End documentation.

Extending Tailwind's Grid in tailwind.config.js

If you frequently use specific custom grid configurations, it's best practice to extend your tailwind.config.js file. This allows you to create reusable, semantic utility classes.

You can extend gridTemplateColumns and gridTemplateRows within the theme.extend section.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      gridTemplateColumns: {
        'layout-sidebar': '250px 1fr', // Creates a 'grid-cols-layout-sidebar' class
        'article-gallery': 'repeat(auto-fit, minmax(200px, 1fr))', // Creates 'grid-cols-article-gallery'
      },
      gridTemplateRows: {
        'header-content-footer': 'auto 1fr auto', // Creates a 'grid-rows-header-content-footer' class
      }
    },
  },
  plugins: [],
}

After updating tailwind.config.js and recompiling your CSS, you can use these custom classes:

<div class="grid grid-cols-layout-sidebar h-screen">
  <aside class="bg-gray-800 text-white p-4">Sidebar</aside>
  <main class="bg-white p-4">Main Content</main>
</div>

Responsive Custom Grids

Tailwind's utility-first approach makes creating responsive grids very intuitive. You can prefix your grid utilities with breakpoints (e.g., sm:, md:, lg:) to apply different grid layouts at various screen sizes.

<div class="grid grid-cols-1 gap-4 
            md:grid-cols-2 
            lg:grid-cols-[200px_1fr_auto]">
  <div class="p-4 bg-purple-200">1</div>
  <div class="p-4 bg-purple-200">2</div>
  <div class="p-4 bg-purple-200">3</div>
  <div class="p-4 bg-purple-200">4</div>
</div>

In this example:

  • On small screens (default), it's a single column grid.
  • From md breakpoint, it becomes a two-column grid.
  • From lg breakpoint, it transforms into a three-column grid with custom widths: a fixed 200px sidebar, a flexible main content area, and an auto-sized third column.

Practical Example: Building a Custom Layout

Let's create a responsive dashboard-like layout with a fixed sidebar, a main content area, and a footer using custom grid definitions.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Tailwind Grid Layout</title>
  <!-- Link to your compiled Tailwind CSS -->
  <link href="./output.css" rel="stylesheet">
  <style>
    /* For demonstration, assuming output.css contains Tailwind styles */
    body { margin: 0; }
  </style>
</head>
<body class="font-sans antialiased text-gray-800">

  <!-- Main Grid Container -->
  <div class="min-h-screen grid 
              grid-cols-1 grid-rows-[auto_1fr_auto] 
              lg:grid-cols-[250px_1fr] lg:grid-rows-[1fr_auto]">

    <!-- Header (visible on small screens, span on large) -->
    <header class="bg-blue-600 text-white p-4 text-center lg:hidden">
      <h1 class="text-2xl font-bold">My Dashboard</h1>
    </header>

    <!-- Sidebar (always visible, spans 1 column on large screens) -->
    <aside class="bg-gray-800 text-white p-4 lg:row-span-2">
      <h2 class="text-xl font-semibold mb-4 hidden lg:block">Dashboard Menu</h2>
      <ul class="space-y-2">
        <li><a href="#" class="block hover:text-blue-300">Home</a></li>
        <li><a href="#" class="block hover:text-blue-300">Analytics</a></li>
        <li><a href="#" class="block hover:text-blue-300">Settings</a></li>
      </ul>
    </aside>

    <!-- Main Content Area -->
    <main class="bg-gray-100 p-6">
      <h2 class="text-3xl font-bold mb-6">Welcome!</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white p-4 rounded-lg shadow-md">
          <h3 class="text-lg font-semibold mb-2">Card 1</h3>
          <p class="text-gray-600">Some content for card one.</p>
        </div>
        <div class="bg-white p-4 rounded-lg shadow-md">
          <h3 class="text-lg font-semibold mb-2">Card 2</h3>
          <p class="text-gray-600">More data for card two.</p>
        </div>
        <div class="bg-white p-4 rounded-lg shadow-md">
          <h3 class="text-lg font-semibold mb-2">Card 3</h3>
          <p class="text-gray-600">Additional information here.</p>
        </div>
      </div>
    </main>

    <!-- Footer (visible on small screens, span on large) -->
    <footer class="bg-gray-700 text-white p-4 text-center lg:col-start-2">
      <p>&copy; 2023 Custom Grid. All rights reserved.</p>
    </footer>

  </div>

</body>
</html>

This example demonstrates how to combine default grid utilities with arbitrary values and responsive prefixes to create a dynamic and custom grid layout.

← Previous Article
How Do I Keep My Dog Kennel Cool?
Next Article →
How do I add a suit to a photo?