Tailwind CSS - Flexbox & Grid

Modern Guide to Tailwind CSS: Flexbox & Grid

Flexbox and Grid are the two most powerful layout modules in modern CSS, and Tailwind provides a comprehensive set of utility classes to harness their power. Understanding when to use each is key to building complex, responsive interfaces efficiently.

When to Use Flexbox vs. Grid

• Flexbox (flex): Use for one-dimensional layouts—either a row or a column. It excels at distributing space along a single axis. Think navigation bars, button groups, or aligning items within a card.
• CSS Grid (grid): Use for two-dimensional layouts—rows and columns simultaneously. It’s perfect for page-level layouts, complex dashboards, and image galleries where you need to control alignment in both directions.

Key Flexbox & Grid Utilities

This table provides a quick reference to the most common Flexbox and Grid utilities. For a deep dive, visit the official Tailwind CSS Documentation.

Topic	Description	Official Docs
Flex Direction	Controls the direction of flex items (flex-row, flex-col).	View Docs
Justify Content	Controls how items are spaced along the main axis.	View Docs
Align Items	Controls how items are spaced along the cross axis.	View Docs
Flex Wrap	Controls whether flex items wrap to new lines (flex-wrap, flex-nowrap).	View Docs
Gap	Controls the space between flex and grid items (gap-4, gap-x-2).	View Docs
Grid Template Columns	Defines the columns of a grid (grid-cols-3, grid-cols-12).	View Docs
Grid Column Start / End	Makes a grid item span multiple columns (col-span-2, col-start-3).	View Docs
Grid Template Rows	Defines the rows of a grid (grid-rows-3).	View Docs

Example 1: Responsive Navigation with Flexbox

Flexbox is ideal for a navigation bar. On small screens, we can use flex-col, and on larger screens, md:flex-row with justify-between to space out the logo and links.

<nav class="bg-slate-800 text-white p-4">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <!-- Logo -->
    <a href="#" class="font-bold text-xl">MyApp</a>

    <!-- Links -->
    <div class="flex flex-col md:flex-row md:space-x-6 space-y-2 md:space-y-0 mt-4 md:mt-0">
      <a href="#" class="hover:text-sky-400">Home</a>
      <a href="#" class="hover:text-sky-400">About</a>
      <a href="#" class="hover:text-sky-400">Services</a>
      <a href="#" class="hover:text-sky-400">Contact</a>
    </div>
  </div>
</nav>

Example 2: Product Card Layout with Grid

CSS Grid makes it trivial to create a responsive gallery of product cards. We define the number of columns for different screen sizes.

<div class="bg-slate-100 p-8">
  <div class="container mx-auto">
    <h2 class="text-3xl font-bold text-slate-800 mb-6">Featured Products</h2>
    <!-- Responsive Grid Layout -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
      <!-- Product Card 1 -->
      <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="h-48 bg-slate-200"></div> <!-- Placeholder for image -->
        <div class="p-4">
          <h3 class="font-semibold text-lg">Modern Chair</h3>
          <p class="text-slate-600">$150.00</p>
        </div>
      </div>
      <!-- Product Card 2 -->
      <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="h-48 bg-slate-200"></div>
        <div class="p-4">
          <h3 class="font-semibold text-lg">Wooden Desk</h3>
          <p class="text-slate-600">$320.00</p>
        </div>
      </div>
      <!-- ... more cards ... -->
    </div>
  </div>
</div>

Best Practices for Modern Layouts

• Mobile First: Design your layouts for small screens first, then use responsive prefixes like sm:, md:, and lg: to add complexity for larger screens.
• Semantic HTML: Use semantic tags like <nav>, <main>, <aside>, and <article>. This improves accessibility and SEO, and makes your layout code easier to understand.
• Combine Them: Don’t be afraid to nest a flex container inside a grid item, or vice-versa. They work powerfully together. For example, a grid for the overall page layout, and flexbox to align items inside the header.