Flexbox and Grid Layouts

Modern CSS layouts rely heavily on Flexbox and Grid. Tailwind CSS provides high-level utility classes that map directly to these layouts, allowing you to align and structure grids easily.

1. Flexbox Layouts

To establish a Flexbox layout container, apply the flex class. You can control layout flow, alignments, and item sizing using these classes:

• Direction: flex-row (horizontal flow, default) or flex-col (vertical column stack).
• Justify Content: justify-start, justify-center, justify-between (positions items along the main axis).
• Align Items: items-start, items-center, items-end (positions items along the cross axis).
• Spacing Gap: gap-4 (sets spacing between items to 1rem).

<!-- Flex navigation container -->
<div className="flex items-center justify-between p-4 bg-gray-50 border-b">
  <div className="font-bold">My Logo</div>
  <div className="flex gap-4">
    <button>Home</button>
    <button>Profile</button>
  </div>
</div>

2. Grid Layouts

For complex multi-column grids (such as card dashboards or picture galleries), the CSS Grid system is a cleaner choice than Flexbox.

• Grid Container: Apply grid to create a grid container.
• Columns Definition: grid-cols-1 (1 column), grid-cols-3 (3 columns), grid-cols-12 (12 columns).
• Spacing Gap: gap-6 (sets grid spacing gap to 1.5rem).

<!-- A 3-column card list layout -->
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 p-6">
  <div className="p-4 border rounded bg-white">Card 1</div>
  <div className="p-4 border rounded bg-white">Card 2</div>
  <div className="p-4 border rounded bg-white">Card 3</div>
</div>

3. Column and Row Spanning

You can configure individual grid child elements to span across multiple grid lines:

• col-span-2: Spans this item across 2 columns.
• col-span-full: Spans this item across the entire width of the grid container.

<div className="grid grid-cols-3 gap-4">
  {/* Spans two columns */}
  <div className="col-span-2 bg-blue-100 p-4">Wide Sidebar Content</div>
  
  {/* Spans one column */}
  <div className="bg-gray-100 p-4">Standard Info Panel</div>
</div>