Layout: Flex & Grid

Tailwind · Reference cheat sheet

📋 Overview

Flexbox and CSS Grid utilities cover most app layouts: toolbars, sidebars, card grids, and centering.

🔧 Core concepts

💡 Examples

Centered hero content:

<div class="flex min-h-screen items-center justify-center">
  <p>Centered</p>
</div>

Sidebar + main:

<div class="flex min-h-screen">
  <aside class="w-64 shrink-0 border-r">Sidebar</aside>
  <main class="flex-1 p-6">Main</main>
</div>

Responsive grid:

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
  <div>1</div><div>2</div><div>3</div><div>4</div>
</div>

⚠️ Pitfalls

• flex-1 children can overflow — add min-w-0 for truncating text in flex rows.
• Mixing heavy nested grids without gap becomes brittle — prefer simpler structures.
• Absolute positioning (absolute inset-0) escapes flex/grid flow — intentional only.

🔗 Related

• responsive.md
• spacing_sizing.md
• utility_classes.md
• getting_started.md