1---
2name: tailwindcss-advanced-layouts
3description: Tailwind CSS advanced layout techniques including CSS Grid and Flexbox patterns. PROACTIVELY activate for: (1) building complex layouts with CSS Grid, (2) grid-template-areas via Tailwind v4 arbitrary values, (3) responsive grid (grid-cols-*, auto-fit, minmax), (4) Flexbox patterns (flex-1, flex-grow, gap), (5) sticky headers and footers, (6) holy grail layout, (7) masonry-style layouts, (8) container queries (@container) with Tailwind, (9) subgrid usage, (10) aspect-ratio utilities, (11) magazine-style multi-column layouts. Provides: Grid template recipes, container-query patterns, holy-grail templates, masonry alternatives, and aspect-ratio examples.
4---
5 
6# Tailwind CSS Advanced Layout Techniques
7 
8## CSS Grid Mastery
9 
10### Complex Grid Layouts
11 
12```html
13<!-- Holy Grail Layout -->
14<div class="grid min-h-screen grid-rows-[auto_1fr_auto]">
15  <header class="bg-white shadow">Header</header>
16  <div class="grid grid-cols-[250px_1fr_300px]">
17    <aside class="bg-gray-50 p-4">Sidebar</aside>
18    <main class="p-6">Main Content</main>
19    <aside class="bg-gray-50 p-4">Right Sidebar</aside>
20  </div>
21  <footer class="bg-gray-800 text-white">Footer</footer>
22</div>
23 
24<!-- Responsive Holy Grail -->
25<div class="grid min-h-screen grid-rows-[auto_1fr_auto]">
26  <header>Header</header>
27  <div class="grid grid-cols-1 md:grid-cols-[250px_1fr] lg:grid-cols-[250px_1fr_300px]">
28    <aside class="order-2 md:order-1">Sidebar</aside>
29    <main class="order-1 md:order-2">Main</main>
30    <aside class="order-3 hidden lg:block">Right</aside>
31  </div>
32  <footer>Footer</footer>
33</div>
34```
35 
36### Grid Template Areas
37 
38```css
39@utility grid-areas-dashboard {
40  grid-template-areas:
41    "header header header"
42    "nav main aside"
43    "nav footer footer";
44}
45 
46@utility area-header { grid-area: header; }
47@utility area-nav { grid-area: nav; }
48@utility area-main { grid-area: main; }
49@utility area-aside { grid-area: aside; }
50@utility area-footer { grid-area: footer; }
51```
52 
53```html
54<div class="grid grid-areas-dashboard grid-cols-[200px_1fr_250px] grid-rows-[60px_1fr_40px] min-h-screen">
55  <header class="area-header bg-white shadow">Header</header>
56  <nav class="area-nav bg-gray-100">Navigation</nav>
57  <main class="area-main p-6">Main Content</main>
58  <aside class="area-aside bg-gray-50 p-4">Sidebar</aside>
59  <footer class="area-footer bg-gray-800 text-white">Footer</footer>
60</div>
61```
62 
63### Auto-Fill and Auto-Fit Grids
64 
65```html
66<!-- Auto-fill: Creates as many tracks as fit, even empty ones -->
67<div class="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-6">
68  <div class="bg-white rounded-lg shadow p-4">Card 1</div>
69  <div class="bg-white rounded-lg shadow p-4">Card 2</div>
70  <div class="bg-white rounded-lg shadow p-4">Card 3</div>
71</div>
72 
73<!-- Auto-fit: Collapses empty tracks -->
74<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-6">
75  <!-- Cards stretch to fill available space -->
76</div>
77 
78<!-- With arbitrary values -->
79<div class="grid grid-cols-[repeat(auto-fill,minmax(min(100%,300px),1fr))] gap-4">
80  <!-- Handles edge case where container is smaller than minmax min -->
81</div>
82```
83 
84### Subgrid
85 
86```css
87/* Enable subgrid in v4 */
88@utility subgrid-cols {
89  grid-template-columns: subgrid;
90}
91 
92@utility subgrid-rows {
93  grid-template-rows: subgrid;
94}
95```
96 
97```html
98<div class="grid grid-cols-4 gap-4">
99  <!-- Span 2 columns but align children to parent grid -->
100  <div class="col-span-2 grid subgrid-cols gap-4">
101    <div>Aligned to parent column 1</div>
102    <div>Aligned to parent column 2</div>
103  </div>
104</div>
105```
106 
107## Advanced Flexbox Patterns
108 
109### Space Distribution
110 
111```html
112<!-- Equal spacing with first/last at edges -->
113<div class="flex justify-between">
114  <div>First</div>
115  <div>Second</div>
116  <div>Third</div>
117</div>
118 
119<!-- Equal spacing everywhere including edges -->
120<div class="flex justify-around">
121  <div>Item</div>
122  <div>Item</div>
123  <div>Item</div>
124</div>
125 
126<!-- Double space between items vs edges -->
127<div class="flex justify-evenly">
128  <div>Item</div>
129  <div>Item</div>
130  <div>Item</div>
131</div>
132```
133 
134### Flexible Item Sizing
135 
136```html
137<!-- Items share space equally -->
138<div class="flex">
139  <div class="flex-1">1/3</div>
140  <div class="flex-1">1/3</div>
141  <div class="flex-1">1/3</div>
142</div>
143 
144<!-- First item takes 2x space -->
145<div class="flex">
146  <div class="flex-[2]">2/4</div>
147  <div class="flex-1">1/4</div>
148  <div class="flex-1">1/4</div>
149</div>
150 
151<!-- Fixed + flexible -->
152<div class="flex">
153  <div class="w-64 shrink-0">Fixed 256px</div>
154  <div class="flex-1 min-w-0">Flexible (can shrink)</div>
155</div>
156 
157<!-- Prevent shrinking with text overflow -->
158<div class="flex min-w-0">
159  <div class="shrink-0">Icon</div>
160  <div class="min-w-0 truncate">Very long text that should truncate</div>
161</div>
162```
163 
164### Masonry-Like with Flexbox
165 
166```html
167<!-- Column-based masonry -->
168<div class="flex flex-col flex-wrap h-[800px] gap-4">
169  <div class="w-[calc(33.333%-1rem)] h-48">Item 1</div>
170  <div class="w-[calc(33.333%-1rem)] h-64">Item 2</div>
171  <div class="w-[calc(33.333%-1rem)] h-32">Item 3</div>
172  <!-- Items flow vertically then wrap to next column -->
173</div>
174```
175 
176## Container Queries
177 
178### Basic Container Queries
179 
180```css
181@plugin "@tailwindcss/container-queries";
182```
183 
184```html
185<!-- Define container -->
186<div class="@container">
187  <!-- Respond to container width -->
188  <div class="flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3 gap-4">
189    <div>Item 1</div>
190    <div>Item 2</div>
191    <div>Item 3</div>
192  </div>
193</div>
194```
195 
196### Named Containers
197 
198```html
199<!-- Multiple named containers -->
200<div class="@container/sidebar">
201  <nav class="@[200px]/sidebar:flex-col @[300px]/sidebar:flex-row">
202    Navigation
203  </nav>
204</div>
205 
206<div class="@container/main">
207  <article class="@[600px]/main:prose-lg @[900px]/main:prose-xl">
208    Content
209  </article>
210</div>
211```
212 
213### Container Query Units
214 
215```html
216<!-- Size relative to container -->
217<div class="@container">
218  <h1 class="text-[5cqw]">Scales with container width</h1>
219  <p class="text-[3cqi]">Scales with container inline size</p>
220</div>
221```
222 
223## Position and Layering
224 
225### Sticky Positioning
226 
227```html
228<!-- Sticky header -->
229<header class="sticky top-0 z-50 bg-white/80 backdrop-blur-sm border-b">
230  Navigation
231</header>
232 
233<!-- Sticky sidebar -->
234<aside class="sticky top-20 h-[calc(100vh-5rem)] overflow-auto">
235  Sidebar content
236</aside>
237 
238<!-- Sticky table header -->
239<div class="overflow-auto max-h-96">
240  <table>
241    <thead class="sticky top-0 bg-white shadow">
242      <tr>
243        <th class="sticky left-0 bg-white z-10">Corner cell</th>
244        <th>Column 2</th>
245      </tr>
246    </thead>
247    <tbody>...</tbody>
248  </table>
249</div>
250```
251 
252### Fixed Elements
253 
254```html
255<!-- Fixed bottom navigation (mobile) -->
256<nav class="fixed bottom-0 inset-x-0 z-50 bg-white border-t md:hidden">
257  <div class="flex justify-around py-2">
258    <a href="#">Home</a>
259    <a href="#">Search</a>
260    <a href="#">Profile</a>
261  </div>
262</nav>
263 
264<!-- Fixed action button -->
265<button class="fixed bottom-6 right-6 z-40 rounded-full bg-brand-500 p-4 shadow-lg">
266  <PlusIcon />
267</button>
268```
269 
270### Z-Index Management
271 
272```css
273@theme {
274  --z-dropdown: 100;
275  --z-sticky: 200;
276  --z-fixed: 300;
277  --z-modal-backdrop: 400;
278  --z-modal: 500;
279  --z-popover: 600;
280  --z-tooltip: 700;
281  --z-toast: 800;
282}
283 
284@utility z-dropdown { z-index: var(--z-dropdown); }
285@utility z-sticky { z-index: var(--z-sticky); }
286@utility z-fixed { z-index: var(--z-fixed); }
287@utility z-modal-backdrop { z-index: var(--z-modal-backdrop); }
288@utility z-modal { z-index: var(--z-modal); }
289@utility z-popover { z-index: var(--z-popover); }
290@utility z-tooltip { z-index: var(--z-tooltip); }
291@utility z-toast { z-index: var(--z-toast); }
292```
293 
294## Overflow and Scrolling
295 
296### Custom Scrollbars
297 
298```css
299@utility scrollbar-thin {
300  scrollbar-width: thin;
301}
302 
303@utility scrollbar-none {
304  scrollbar-width: none;
305  -ms-overflow-style: none;
306}
307 
308@utility scrollbar-none::-webkit-scrollbar {
309  display: none;
310}
311 
312/* Custom scrollbar styling */
313@utility scrollbar-custom {
314  scrollbar-color: oklch(0.7 0 0) oklch(0.95 0 0);
315}
316 
317@utility scrollbar-custom::-webkit-scrollbar {
318  width: 8px;
319  height: 8px;
320}
321 
322@utility scrollbar-custom::-webkit-scrollbar-track {
323  background: oklch(0.95 0 0);
324  border-radius: 4px;
325}
326 
327@utility scrollbar-custom::-webkit-scrollbar-thumb {
328  background: oklch(0.7 0 0);
329  border-radius: 4px;
330}
331 
332@utility scrollbar-custom::-webkit-scrollbar-thumb:hover {
333  background: oklch(0.5 0 0);
334}
335```
336 
337### Scroll Snap
338 
339```html
340<!-- Horizontal carousel -->
341<div class="flex snap-x snap-mandatory overflow-x-auto gap-4 pb-4">
342  <div class="snap-start shrink-0 w-80">Card 1</div>
343  <div class="snap-start shrink-0 w-80">Card 2</div>
344  <div class="snap-start shrink-0 w-80">Card 3</div>
345</div>
346 
347<!-- Full-page sections -->
348<div class="h-screen snap-y snap-mandatory overflow-y-auto">
349  <section class="h-screen snap-start">Section 1</section>
350  <section class="h-screen snap-start">Section 2</section>
351  <section class="h-screen snap-start">Section 3</section>
352</div>
353 
354<!-- Snap with padding -->
355<div class="snap-x scroll-pl-6 overflow-x-auto">
356  <div class="snap-start">...</div>
357</div>
358```
359 
360### Scroll Margin for Anchors
361 
362```html
363<!-- Offset for fixed header -->
364<section id="about" class="scroll-mt-20">
365  <!-- Content appears below fixed header when linked -->
366</section>
367```
368 
369## Aspect Ratio and Object Fit
370 
371### Responsive Aspect Ratios
372 
373```html
374<!-- Fixed aspect ratio container -->
375<div class="aspect-video bg-gray-100">
376  <video class="h-full w-full object-cover">...</video>
377</div>
378 
379<div class="aspect-square rounded-full overflow-hidden">
380  <img src="avatar.jpg" class="h-full w-full object-cover" />
381</div>
382 
383<!-- Custom aspect ratio -->
384<div class="aspect-[4/3]">4:3 content</div>
385<div class="aspect-[21/9]">Ultra-wide content</div>
386```
387 
388### Object Positioning
389 
390```html
391<!-- Focus on specific part of image -->
392<div class="h-64 overflow-hidden">
393  <img
394    src="portrait.jpg"
395    class="h-full w-full object-cover object-top"
396  />
397</div>
398 
399<!-- Arbitrary object position -->
400<img class="object-cover object-[25%_75%]" src="..." />
401```
402 
403## Advanced Spacing
404 
405### Logical Properties
406 
407```html
408<!-- Works for LTR and RTL -->
409<div class="ps-4 pe-6 ms-auto">
410  Padding and margin that respect text direction
411</div>
412 
413<!-- Block direction (vertical in horizontal writing modes) -->
414<div class="pbs-4 pbe-6 mbs-auto">
415  Block-direction spacing
416</div>
417```
418 
419### Space Between with Dividers
420 
421```html
422<!-- Dividers between items -->
423<ul class="divide-y divide-gray-200">
424  <li class="py-4">Item 1</li>
425  <li class="py-4">Item 2</li>
426  <li class="py-4">Item 3</li>
427</ul>
428 
429<!-- Horizontal dividers -->
430<div class="flex divide-x divide-gray-200">
431  <div class="px-4">Section 1</div>
432  <div class="px-4">Section 2</div>
433  <div class="px-4">Section 3</div>
434</div>
435```
436 
437### Negative Margins for Bleeds
438 
439```html
440<!-- Full-bleed image in padded container -->
441<article class="px-6">
442  <p>Padded content</p>
443  <img src="hero.jpg" class="-mx-6 w-[calc(100%+3rem)]" />
444  <p>More padded content</p>
445</article>
446 
447<!-- Pull quote that breaks out -->
448<div class="max-w-prose mx-auto px-4">
449  <p>Normal content...</p>
450  <blockquote class="-mx-8 md:-mx-16 px-8 md:px-16 py-8 bg-gray-100">
451    Featured quote that extends beyond content width
452  </blockquote>
453</div>
454```
455 
456## Multi-Column Layout
457 
458### Text Columns
459 
460```html
461<!-- Responsive columns -->
462<div class="columns-1 sm:columns-2 lg:columns-3 gap-8">
463  <p>Content flows across columns...</p>
464</div>
465 
466<!-- Fixed-width columns -->
467<div class="columns-[300px] gap-6">
468  <p>Creates as many 300px columns as fit</p>
469</div>
470 
471<!-- Prevent breaks inside elements -->
472<div class="columns-2">
473  <div class="break-inside-avoid mb-4">
474    Card that stays together
475  </div>
476</div>
477```
478 
479## Responsive Patterns
480 
481### Container Queries + Media Queries
482 
483```html
484<div class="@container">
485  <div class="
486    /* Container query for component-level responsiveness */
487    @md:flex @md:gap-4
488 
489    /* Media query for page-level responsiveness */
490    lg:grid lg:grid-cols-2
491  ">
492    Content
493  </div>
494</div>
495```
496 
497### Breakpoint-Based Visibility
498 
499```html
500<!-- Show different content per breakpoint -->
501<nav>
502  <!-- Mobile menu button -->
503  <button class="md:hidden">Menu</button>
504 
505  <!-- Desktop navigation -->
506  <ul class="hidden md:flex gap-4">
507    <li>Home</li>
508    <li>About</li>
509    <li>Contact</li>
510  </ul>
511</nav>
512```
513 
514### Fluid Sizing with Clamp
515 
516```html
517<!-- Fluid padding -->
518<section class="py-[clamp(2rem,5vw,6rem)] px-[clamp(1rem,3vw,4rem)]">
519  Content with responsive padding
520</section>
521 
522<!-- Fluid max-width -->
523<div class="mx-auto w-full max-w-[clamp(300px,90vw,1200px)]">
524  Responsive container
525</div>
526```
527 
528## Print Styles
529 
530```html
531<!-- Hide elements when printing -->
532<nav class="print:hidden">Navigation</nav>
533 
534<!-- Show only when printing -->
535<div class="hidden print:block">Print-only content</div>
536 
537<!-- Print-specific styles -->
538<article class="print:text-black print:bg-white">
539  <h1 class="text-2xl print:text-xl">Heading</h1>
540  <a href="..." class="text-blue-500 print:text-black print:underline">
541    Link (shows as text when printed)
542  </a>
543</article>
544 
545<!-- Prevent page breaks -->
546<div class="print:break-inside-avoid">
547  Keep this content together on one page
548</div>
549 
550<!-- Force page break -->
551<div class="print:break-before-page">
552  Start on new page
553</div>
554```
555 
556## Best Practices
557 
558### 1. Use Modern Layout Methods
559 
560```html
561<!-- Prefer Grid for 2D layouts -->
562<div class="grid grid-cols-3 gap-4">
563 
564<!-- Prefer Flexbox for 1D layouts -->
565<div class="flex items-center gap-2">
566```
567 
568### 2. Handle Edge Cases
569 
570```html
571<!-- Prevent flex item from overflowing -->
572<div class="flex min-w-0">
573  <div class="min-w-0 truncate">Long text</div>
574</div>
575 
576<!-- Prevent grid blowout -->
577<div class="grid grid-cols-1 min-w-0">
578  <div class="overflow-hidden">Content that might overflow</div>
579</div>
580```
581 
582### 3. Use Semantic Sizing
583 
584```html
585<!-- Prefer max-w-prose for reading content -->
586<article class="max-w-prose mx-auto">
587 
588<!-- Use container for page sections -->
589<div class="container mx-auto px-4">
590```
591 
592### 4. Test All Breakpoints
593 
594Create systematic tests for all responsive layouts to ensure they work at every breakpoint.
595