Tailwind CSS - Grid Column Start / End

Modern Guide to Tailwind CSS: Spanning Grid Columns

Tailwind’s col-span-*, col-start-*, and col-end-* utilities give you precise control over how items are placed and sized within a CSS Grid layout. They are essential for creating non-uniform, magazine-style layouts.

Understanding Grid Lines

Before using these utilities, it’s crucial to understand grid lines. A grid with N columns has N+1 column lines. For example, a 3-column grid has 4 vertical lines:

Line 1      Line 2      Line 3      Line 4
  | [Column 1] | [Column 2] | [Column 3] |

The col-start-* and col-end-* utilities refer to these line numbers.

Core Column Utilities

Class	CSS Property	Description
col-span-{n}	grid-column: span {n} / span {n};	Makes an element span across {n} columns. The most common utility.
col-span-full	grid-column: 1 / -1;	Makes an element span across all columns of the grid.
col-start-{n}	grid-column-start: {n};	Makes an element start at grid line {n}.
col-end-{n}	grid-column-end: {n};	Makes an element end at grid line {n}.

Practical Example: A Blog Post Layout

Let’s build a classic blog layout with a main content area and a sidebar. We’ll use a 12-column grid, a standard in web design.

<div class="min-h-screen bg-slate-100 p-8 font-sans">
  <div class="container mx-auto">
    <!-- Define a 12-column grid. The gap is applied between columns. -->
    <div class="grid grid-cols-12 gap-8">

      <!-- Header: Spans all 12 columns -->
      <header class="col-span-12 bg-white p-6 rounded-lg shadow-md">
        <h1 class="text-4xl font-bold text-slate-800">My Modern Blog</h1>
        <p class="text-slate-600">Exploring tech and design with Tailwind CSS.</p>
      </header>

      <!-- Main Content: Spans 8 columns on medium screens and up -->
      <main class="col-span-12 md:col-span-8 bg-white p-6 rounded-lg shadow-md">
        <h2 class="text-2xl font-semibold mb-4">Article Title</h2>
        <p class="text-slate-700 leading-relaxed">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
        </p>
      </main>

      <!-- Sidebar: Spans 4 columns on medium screens and up -->
      <aside class="col-span-12 md:col-span-4 bg-white p-6 rounded-lg shadow-md">
        <h3 class="text-xl font-semibold mb-4">About the Author</h3>
        <p class="text-slate-700">
          A brief bio about the author goes here.
        </p>
      </aside>

      <!-- Footer: Spans all 12 columns, and is explicitly started and ended for demonstration -->
      <footer class="col-start-1 col-end-13 bg-white p-6 rounded-lg shadow-md text-center text-slate-500">
        &copy; 2024 My Modern Blog. All rights reserved.
      </footer>

    </div>
  </div>
</div>

Debugging and Best Practices

• Visualize Your Grid: Use your browser’s developer tools (most have a grid inspector) to see the grid lines, gaps, and how your items are placed. This is the best way to debug column span issues.
• Responsive Spanning: Always start mobile-first. By default, an item spans one column (col-span-12 on a grid-cols-12 is effectively full-width). Use responsive prefixes like md:col-span-8 to create multi-column layouts on larger screens.
• col-span is Usually Enough: For most layouts, you’ll only need col-span-{n}. Use col-start-* and col-end-* for more complex layouts where you need to leave intentional empty space or have items overlap.