{"enrichment":{"faq":[{"a":"tailwindcss-advanced-layouts teaches you to construct the classic holy grail pattern\u2014header, footer, sidebar, and main content\u2014using Tailwind's Grid utilities. You'll learn to define grid-template-areas, set up responsive column tracks with grid-cols, and use gap utilities to space sections. The skill covers collapsing sidebars on mobile and maintaining semantic HTML structure throughout.","q":"How do I build a holy grail layout with Tailwind CSS?"},{"a":"tailwindcss-advanced-layouts covers Tailwind's grid-auto-fit and grid-auto-flow utilities for creating fluid, auto-responsive grids. You'll master minmax-based column sizing to let grid items wrap naturally as viewport width changes, combining grid-cols with responsive prefixes (sm:, lg:, etc.) to adapt layouts across breakpoints without media query bloat.","q":"What responsive grid auto-fit minmax techniques does Tailwind support?"},{"a":"tailwindcss-advanced-layouts explains container queries for component-level responsiveness using @container syntax. You'll learn to size containers with container-type utilities, then apply @container breakpoints to child elements so they respond to their parent's width rather than the viewport. This enables truly reusable, context-aware components independent of page layout.","q":"How can I implement container queries in tailwindcss-advanced-layouts?"},{"a":"tailwindcss-advanced-layouts demonstrates sticky positioning with Tailwind's sticky utility combined with top/bottom spacing. You'll learn z-index layering to keep sticky headers above scrolling content, manage stacking contexts across nested elements, and handle edge cases like sticky footers and multi-level sticky sections in complex page structures.","q":"What patterns does tailwindcss-advanced-layouts cover for sticky headers?"},{"a":"tailwindcss-advanced-layouts teaches masonry effects using CSS columns (columns-1, columns-2, etc.) and gap utilities for Pinterest-style layouts. You'll also explore multi-column text wrapping, scroll snap carousels for smooth scrolling experiences, and aspect-ratio utilities to maintain consistent proportions across responsive breakpoints.","q":"How do I create masonry and multi-column layouts with Tailwind?"},{"a":"tailwindcss-advanced-layouts covers flex space distribution (justify-between, space-around), flex-grow/flex-shrink for dynamic sizing, and flex-wrap for multi-line layouts. You'll master flex-1 for equal distribution, gap utilities for consistent spacing, and combining Flexbox with Grid for hybrid layouts that handle complex multi-section page structures efficiently.","q":"What advanced Flexbox patterns are covered in this skill?"}],"shadow_tags":["layout-architecture","responsive-design","grid-system","flexbox-patterns","component-queries","scroll-behavior","positioning-stacking","print-media","overflow-handling"],"summary_rewrite":"Learn advanced layout techniques with Tailwind CSS, covering CSS Grid fundamentals like grid-template-areas and auto-fit, Flexbox space distribution, container queries for responsive design, and practical patterns for sticky headers, masonry effects, and multi-section page structures."},"files":[{"bytes":14226,"path":"plugins/tailwindcss-master/skills/tailwindcss-advanced-layouts/SKILL.md","sha256":"17b976c7e8391635ec545d4ce76e99d3281765bde3f25836321f83062071a230","url":"https://skillfed.io/files/JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-layouts/4eae4c67/SKILL.md"}],"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-layouts","links":{"html":"https://skillfed.io/JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-layouts","md":"https://skillfed.io/JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-layouts.md","repo":"https://github.com/JosiahSiegel/claude-plugin-marketplace"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":10,"language":"Shell","last_updated":"2026-06-18","license":"MIT","name":"tailwindcss-advanced-layouts","publisher":"JosiahSiegel","stars":49},"relations":{"similar":[{"id":"OneWave-AI/claude-skills/responsive-layout-builder"},{"id":"bobmatnyc/claude-mpm-skills/tailwind"},{"id":"jwynia/agent-skills/shadcn-layouts"},{"id":"patricio0312rev/skills/responsive-design-system"},{"id":"YangsonHung/awesome-agent-skills/frontend-quality-guardrails-cn"},{"id":"manutej/luxor-claude-marketplace/responsive-design"},{"id":"patricio0312rev/skills/page-layout-builder"},{"id":"manutej/luxor-claude-marketplace/tailwind-css"},{"id":"skills-il/localization/hebrew-tailwind-preset"},{"id":"jmsktm/claude-settings/ui-builder"}]},"slug":{"owner":"JosiahSiegel","repo":"claude-plugin-marketplace","skill":"tailwindcss-advanced-layouts"},"version":"4eae4c67"}