Skip to content
Tailwind CSS

Flexbox & Grid

Center, distribute, and grid layouts with utilities.

#flexbox#grid#layout

Code

tailwind
<!-- Flexbox centering -->
<div class="flex items-center justify-center min-h-screen">
  <div class="bg-white p-8 rounded shadow">Centered</div>
</div>

<!-- Space between -->
<div class="flex justify-between items-center">
  <span>Left</span>
  <span>Right</span>
</div>

<!-- CSS Grid -->
<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2">Spans two columns</div>
  <div>One</div>
</div>

<!-- Auto-fit responsive grid without media queries -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
  <div>Item</div>
</div>
All snippets