Tailwind CSS Advanced Layout Techniques CSS Grid Mastery Complex Grid Layouts

Grid Template Areas @utility grid-areas-dashboard { grid-template-areas: "header header header" "nav main aside" "nav footer footer"; }

@utility area-header { grid-area: header; } @utility area-nav { grid-area: nav; } @utility area-main { grid-area: main; } @utility area-aside { grid-area: aside; } @utility area-footer { grid-area: footer; }

Auto-Fill and Auto-Fit Grids

Subgrid / Enable subgrid in v4 / @utility subgrid-cols { grid-template-columns: subgrid; }

@utility subgrid-rows { grid-template-rows: subgrid; }

Advanced Flexbox Patterns Space Distribution

Flexible Item Sizing

Masonry-Like with Flexbox

Container Queries Basic Container Queries @plugin "@tailwindcss/container-queries";

Named Containers

Container Query Units

Position and Layering Sticky Positioning

Fixed Elements

Z-Index Management @theme { --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-popover: 600; --z-tooltip: 700; --z-toast: 800; }

@utility z-dropdown { z-index: var(--z-dropdown); } @utility z-sticky { z-index: var(--z-sticky); } @utility z-fixed { z-index: var(--z-fixed); } @utility z-modal-backdrop { z-index: var(--z-modal-backdrop); } @utility z-modal { z-index: var(--z-modal); } @utility z-popover { z-index: var(--z-popover); } @utility z-tooltip { z-index: var(--z-tooltip); } @utility z-toast { z-index: var(--z-toast); }

Overflow and Scrolling Custom Scrollbars @utility scrollbar-thin { scrollbar-width: thin; }

@utility scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; }

@utility scrollbar-none::-webkit-scrollbar { display: none; }

/ Custom scrollbar styling / @utility scrollbar-custom { scrollbar-color: oklch(0.7 0 0) oklch(0.95 0 0); }

@utility scrollbar-custom::-webkit-scrollbar { width: 8px; height: 8px; }

@utility scrollbar-custom::-webkit-scrollbar-track { background: oklch(0.95 0 0); border-radius: 4px; }

@utility scrollbar-custom::-webkit-scrollbar-thumb { background: oklch(0.7 0 0); border-radius: 4px; }

@utility scrollbar-custom::-webkit-scrollbar-thumb:hover { background: oklch(0.5 0 0); }

Scroll Snap

Scroll Margin for Anchors

Aspect Ratio and Object Fit Responsive Aspect Ratios

Object Positioning

Advanced Spacing Logical Properties

Space Between with Dividers

• Item 1
• Item 2
• Item 3

Negative Margins for Bleeds

Padded content

More padded content

Multi-Column Layout Text Columns

Responsive Patterns Container Queries + Media Queries

Breakpoint-Based Visibility

Fluid Sizing with Clamp

Print Styles

Best Practices 1. Use Modern Layout Methods