Grid Examples
Common flexbox and CSS Grid layout patterns with Tailwind CSS.
Flexbox Patterns
1. Horizontal Stack
Items arranged horizontally with spacing.
<div className="flex space-x-4">
<div className="rounded bg-blue-500 px-4 py-2 text-white">Item 1</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">Item 2</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">Item 3</div>
</div>Notes: flex creates a row by default. space-x-4 adds horizontal spacing between items.
2. Vertical Stack
Items stacked vertically with spacing.
<div className="flex flex-col space-y-4">
<div className="rounded bg-green-500 px-4 py-2 text-white">Item 1</div>
<div className="rounded bg-green-500 px-4 py-2 text-white">Item 2</div>
<div className="rounded bg-green-500 px-4 py-2 text-white">Item 3</div>
</div>Notes: flex-col changes direction to vertical. space-y-4 adds vertical spacing.
3. Center Horizontally
Content centered horizontally in container.
<div className="flex justify-center">
<div className="rounded bg-purple-500 px-6 py-3 text-white">
Centered Content
</div>
</div>Notes: justify-center centers items along the main axis (horizontal by default).
4. Center Vertically
Content centered vertically in container.
<div className="flex h-64 items-center bg-gray-100">
<div className="rounded bg-purple-500 px-6 py-3 text-white">
Vertically Centered
</div>
</div>Notes: items-center centers items along the cross axis. Container needs explicit height.
5. Center Both Directions
Content centered both horizontally and vertically.
<div className="flex h-64 items-center justify-center bg-gray-100">
<div className="rounded bg-purple-500 px-6 py-3 text-white">
Fully Centered
</div>
</div>Notes: Combine justify-center and items-center for perfect centering. Common for hero sections and empty states.
6. Space Between
Items with maximum space between them.
<div className="flex justify-between">
<div className="rounded bg-blue-500 px-4 py-2 text-white">Left</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">Right</div>
</div>Notes: justify-between pushes items to opposite ends. Perfect for headers with logo and navigation.
7. Space Around
Items with equal space around each item.
<div className="flex justify-around">
<div className="rounded bg-blue-500 px-4 py-2 text-white">A</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">B</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">C</div>
</div>Notes: justify-around distributes items with equal space around each. Edge space is half of inter-item space.
8. Space Evenly
Items with equal space between and around.
<div className="flex justify-evenly">
<div className="rounded bg-blue-500 px-4 py-2 text-white">A</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">B</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">C</div>
</div>Notes: justify-evenly creates perfectly equal spacing including edges.
9. Align Items to Start
Items aligned to the top (cross-axis start).
<div className="flex h-32 items-start bg-gray-100">
<div className="rounded bg-green-500 px-4 py-2 text-white">Top</div>
<div className="h-20 rounded bg-green-500 px-4 py-2 text-white">Tall Item</div>
</div>Notes: items-start aligns items to the top in horizontal layouts.
10. Align Items to End
Items aligned to the bottom (cross-axis end).
<div className="flex h-32 items-end bg-gray-100">
<div className="rounded bg-green-500 px-4 py-2 text-white">Bottom</div>
<div className="h-20 rounded bg-green-500 px-4 py-2 text-white">Tall Item</div>
</div>Notes: items-end aligns items to the bottom in horizontal layouts.
11. Stretch Items
Items stretched to fill cross-axis height.
<div className="flex h-32 items-stretch bg-gray-100">
<div className="rounded bg-purple-500 px-4 text-white">Stretched</div>
<div className="rounded bg-purple-500 px-4 text-white">Stretched</div>
</div>Notes: items-stretch (default) makes items fill container height. Useful for equal-height cards.
12. Flex Wrap
Items wrap to next line when space runs out.
<div className="flex flex-wrap gap-4">
<div className="rounded bg-blue-500 px-4 py-2 text-white">Item 1</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">Item 2</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">Item 3</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">Item 4</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">Item 5</div>
</div>Notes: flex-wrap allows wrapping. gap-4 works better than space-x-* for wrapped layouts.
13. Flex Grow
One item grows to fill available space.
<div className="flex gap-4">
<div className="rounded bg-blue-500 px-4 py-2 text-white">Fixed</div>
<div className="flex-1 rounded bg-green-500 px-4 py-2 text-white">Grows</div>
<div className="rounded bg-blue-500 px-4 py-2 text-white">Fixed</div>
</div>Notes: flex-1 makes item grow to fill available space. Common for search bars and content areas.
14. Flex Shrink
Item shrinks when space is limited.
<div className="flex gap-4">
<div className="w-64 flex-shrink-0 rounded bg-blue-500 px-4 py-2 text-white">
Fixed Width
</div>
<div className="flex-shrink rounded bg-green-500 px-4 py-2 text-white">
Can Shrink
</div>
</div>Notes: flex-shrink-0 prevents shrinking. Useful for sidebars and fixed-width elements.
15. Reverse Row
Items in reverse horizontal order.
<div className="flex flex-row-reverse space-x-4 space-x-reverse">
<div className="rounded bg-purple-500 px-4 py-2 text-white">First</div>
<div className="rounded bg-purple-500 px-4 py-2 text-white">Second</div>
<div className="rounded bg-purple-500 px-4 py-2 text-white">Third</div>
</div>Notes: flex-row-reverse reverses order. Add space-x-reverse to fix spacing direction.
16. Header Layout
Typical header with logo, navigation, and actions.
<header className="flex items-center justify-between bg-white px-6 py-4 shadow">
<div className="text-xl font-bold text-gray-900">Logo</div>
<nav className="flex space-x-6">
<a href="#" className="text-gray-700 hover:text-gray-900">Home</a>
<a href="#" className="text-gray-700 hover:text-gray-900">About</a>
<a href="#" className="text-gray-700 hover:text-gray-900">Contact</a>
</nav>
<button className="rounded bg-blue-600 px-4 py-2 text-white">Sign In</button>
</header>Notes: Combines justify-between and items-center for classic header layout.
17. Card with Header and Footer
Flexbox card with header, content, and footer.
<div className="flex h-64 flex-col rounded-lg border border-gray-200 bg-white shadow">
<div className="border-b border-gray-200 px-4 py-3">
<h3 className="font-semibold text-gray-900">Card Header</h3>
</div>
<div className="flex-1 overflow-y-auto px-4 py-3">
<p className="text-gray-600">Scrollable content area that grows to fill available space.</p>
</div>
<div className="border-t border-gray-200 px-4 py-3">
<button className="text-sm text-blue-600">Action</button>
</div>
</div>Notes: flex-1 on content area makes it grow. overflow-y-auto enables scrolling if content is long.
CSS Grid Patterns
18. Two-Column Grid
Simple two-column layout.
<div className="grid grid-cols-2 gap-4">
<div className="rounded bg-blue-500 p-4 text-white">Column 1</div>
<div className="rounded bg-blue-500 p-4 text-white">Column 2</div>
</div>Notes: grid-cols-2 creates two equal columns. gap-4 adds spacing between grid items.
19. Three-Column Grid
Three equal columns.
<div className="grid grid-cols-3 gap-4">
<div className="rounded bg-green-500 p-4 text-white">Col 1</div>
<div className="rounded bg-green-500 p-4 text-white">Col 2</div>
<div className="rounded bg-green-500 p-4 text-white">Col 3</div>
</div>Notes: Use grid-cols-4, grid-cols-6, etc. for more columns.
20. Responsive Grid
Grid that adapts to screen size.
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<div className="rounded bg-purple-500 p-4 text-white">Item 1</div>
<div className="rounded bg-purple-500 p-4 text-white">Item 2</div>
<div className="rounded bg-purple-500 p-4 text-white">Item 3</div>
<div className="rounded bg-purple-500 p-4 text-white">Item 4</div>
<div className="rounded bg-purple-500 p-4 text-white">Item 5</div>
<div className="rounded bg-purple-500 p-4 text-white">Item 6</div>
</div>Notes: 1 column on mobile, 2 on tablet, 3 on desktop. Most common responsive grid pattern.
21. Auto-Fit Grid
Grid that automatically fits items.
<div className="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
<div className="rounded bg-blue-500 p-4 text-white">Auto 1</div>
<div className="rounded bg-blue-500 p-4 text-white">Auto 2</div>
<div className="rounded bg-blue-500 p-4 text-white">Auto 3</div>
<div className="rounded bg-blue-500 p-4 text-white">Auto 4</div>
</div>Notes: Items automatically wrap based on available space. Minimum width is 200px. Requires arbitrary value syntax.
22. Sidebar Layout
Main content with fixed-width sidebar.
<div className="grid grid-cols-[250px_1fr] gap-6">
<aside className="rounded bg-gray-200 p-4">
<h3 className="font-semibold">Sidebar</h3>
<nav className="mt-4 space-y-2">
<a href="#" className="block text-gray-700">Link 1</a>
<a href="#" className="block text-gray-700">Link 2</a>
</nav>
</aside>
<main className="rounded bg-white p-6 shadow">
<h1 className="text-2xl font-bold">Main Content</h1>
<p className="mt-4 text-gray-600">Content fills remaining space.</p>
</main>
</div>Notes: grid-cols-[250px_1fr] creates 250px sidebar and flexible main area. Use arbitrary values for custom column sizes.
23. Dashboard Layout
Three-column dashboard with header.
<div className="grid grid-cols-[200px_1fr_300px] grid-rows-[auto_1fr] gap-4">
<header className="col-span-3 rounded bg-blue-600 p-4 text-white">
Header spans all columns
</header>
<aside className="rounded bg-gray-200 p-4">Left Sidebar</aside>
<main className="rounded bg-white p-6 shadow">Main Content</main>
<aside className="rounded bg-gray-200 p-4">Right Sidebar</aside>
</div>Notes: col-span-3 makes header span all three columns. grid-rows-[auto_1fr] sets header height to auto and content to fill remaining space.
24. Span Multiple Columns
Item spanning multiple grid columns.
<div className="grid grid-cols-3 gap-4">
<div className="col-span-2 rounded bg-blue-500 p-4 text-white">
Spans 2 columns
</div>
<div className="rounded bg-blue-500 p-4 text-white">1 column</div>
<div className="rounded bg-blue-500 p-4 text-white">1 column</div>
<div className="rounded bg-blue-500 p-4 text-white">1 column</div>
<div className="rounded bg-blue-500 p-4 text-white">1 column</div>
</div>Notes: col-span-2 makes item take two columns. Use col-span-3, col-span-4, etc. for wider spans.
25. Span Multiple Rows
Item spanning multiple grid rows.
<div className="grid grid-cols-3 grid-rows-3 gap-4">
<div className="row-span-2 rounded bg-purple-500 p-4 text-white">
Spans 2 rows
</div>
<div className="rounded bg-purple-500 p-4 text-white">Item 2</div>
<div className="rounded bg-purple-500 p-4 text-white">Item 3</div>
<div className="rounded bg-purple-500 p-4 text-white">Item 4</div>
<div className="rounded bg-purple-500 p-4 text-white">Item 5</div>
<div className="col-span-2 rounded bg-purple-500 p-4 text-white">
Spans 2 columns
</div>
</div>Notes: row-span-2 makes item span two rows. Combine with col-span-* for complex layouts.
26. Masonry-Style Grid
Grid with varying row heights.
<div className="grid grid-cols-3 gap-4">
<div className="row-span-2 rounded bg-blue-500 p-4 text-white">Tall</div>
<div className="rounded bg-blue-500 p-4 text-white">Short</div>
<div className="row-span-3 rounded bg-blue-500 p-4 text-white">Very Tall</div>
<div className="rounded bg-blue-500 p-4 text-white">Short</div>
<div className="row-span-2 rounded bg-blue-500 p-4 text-white">Tall</div>
<div className="rounded bg-blue-500 p-4 text-white">Short</div>
</div>Notes: Manually set row spans to create masonry effect. For true masonry (auto-packing), use a JavaScript library.
27. Grid Gap Variations
Different gap sizes for rows and columns.
<div className="grid grid-cols-3 gap-x-6 gap-y-2">
<div className="rounded bg-green-500 p-4 text-white">Item 1</div>
<div className="rounded bg-green-500 p-4 text-white">Item 2</div>
<div className="rounded bg-green-500 p-4 text-white">Item 3</div>
<div className="rounded bg-green-500 p-4 text-white">Item 4</div>
<div className="rounded bg-green-500 p-4 text-white">Item 5</div>
<div className="rounded bg-green-500 p-4 text-white">Item 6</div>
</div>Notes: gap-x-6 sets horizontal gap, gap-y-2 sets vertical gap. Use when rows and columns need different spacing.
28. Full-Bleed Grid Item
Grid item that breaks out to full width.
<div className="grid grid-cols-3 gap-4">
<div className="rounded bg-blue-500 p-4 text-white">Item 1</div>
<div className="rounded bg-blue-500 p-4 text-white">Item 2</div>
<div className="rounded bg-blue-500 p-4 text-white">Item 3</div>
<div className="col-span-full rounded bg-purple-500 p-4 text-white">
Full Width Item
</div>
<div className="rounded bg-blue-500 p-4 text-white">Item 4</div>
<div className="rounded bg-blue-500 p-4 text-white">Item 5</div>
<div className="rounded bg-blue-500 p-4 text-white">Item 6</div>
</div>Notes: col-span-full makes item span all columns, regardless of grid column count.
29. Grid Alignment
Align items within grid cells.
<div className="grid grid-cols-3 gap-4">
<div className="flex h-32 items-center justify-center rounded bg-blue-500 text-white">
Centered
</div>
<div className="flex h-32 items-start justify-start rounded bg-green-500 p-2 text-white">
Top Left
</div>
<div className="flex h-32 items-end justify-end rounded bg-purple-500 p-2 text-white">
Bottom Right
</div>
</div>Notes: Use flexbox inside grid items for precise alignment. Grid handles layout, flexbox handles item positioning.
30. Holy Grail Layout
Classic header, footer, sidebar, and main content layout.
<div className="grid min-h-screen grid-cols-[200px_1fr_200px] grid-rows-[auto_1fr_auto]">
<header className="col-span-3 bg-gray-900 p-4 text-white">Header</header>
<aside className="bg-gray-200 p-4">Left Sidebar</aside>
<main className="bg-white p-6">Main Content</main>
<aside className="bg-gray-200 p-4">Right Sidebar</aside>
<footer className="col-span-3 bg-gray-900 p-4 text-white">Footer</footer>
</div>Notes: min-h-screen ensures layout fills viewport. grid-rows-[auto_1fr_auto] makes header/footer hug content and main area fill remaining space.
Related
- Setup — Tailwind CSS v4 installation
- Examples — 30 common utility patterns
- Utilities — comprehensive utility reference
- Responsive — responsive design breakpoints