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