Grid Areas and Placement

1. Column and Row Placement

You can control where elements appear in the grid using start and span utilities:

<div class="grid grid-cols-4 gap-4">
    <div class="bg-indigo-200 col-start-2 col-span-2 p-4">
        Spans from column 2 to 4
    </div>
    <div class="bg-indigo-400 row-start-2 row-span-2 p-4">
        Starts on row 2 and spans 2 rows
    </div>
</div>
            

2. Named Grid Areas (with custom CSS)

Tailwind does not support named grid areas directly, but you can extend it via @layer and apply custom CSS:

/* tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      gridTemplateAreas: {
        layout: [
          "header header",
          "sidebar content",
          "footer footer",
        ],
      },
    },
  },
  plugins: [require('@savvywombat/tailwindcss-grid-areas')],
}
            

<div class="grid [grid-template-areas:'header_header''sidebar_content''footer_footer'] grid-cols-2 gap-4">
    <header class="[grid-area:header] bg-blue-300 p-4">Header</header>
    <aside class="[grid-area:sidebar] bg-blue-200 p-4">Sidebar</aside>
    <main class="[grid-area:content] bg-white p-4">Main Content</main>
    <footer class="[grid-area:footer] bg-blue-400 p-4">Footer</footer>
</div>
            

Use plugins like @savvywombat/tailwindcss-grid-areas for cleaner area naming.

3. Let the Grid Auto-Place

If you don’t specify start or span, Tailwind will auto-place items based on document order:

<div class="grid grid-cols-3 gap-4">
    <div class="bg-gray-200 p-4">1</div>
    <div class="bg-gray-300 p-4">2</div>
    <div class="bg-gray-400 p-4">3</div>
</div>