tailwindcss-advanced-layouts

Q: How do I install tailwindcss-advanced-layouts?

Run npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace --skill tailwindcss-advanced-layouts in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/tailwindcss-advanced-layouts/ (personal) or .claude/skills/tailwindcss-advanced-layouts/ (project).

by josiahsiegelFrontend & Design

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.

Installs: 8.1K
Last 24h: —
Trending rank: —
Security: Pass

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace --skill tailwindcss-advanced-layouts

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads tailwindcss-advanced-layouts automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

Security audits

Independent scans of the skill's instructions and bundled files.

Gen Agent Trust Hub PassSAFE ·This skill is a collection of documentation, examples, and utility snippets for Tailwind CSS layout techniques. It does not contain any executable scripts, remote dependencies, or security risks.

Socket PassNo alerts

Snyk PassLOW ·Risk: LOW · No issues

Runlayer PassNONE ·1 file scanned · No issues

SKILL.md

The instructions your agent reads when the skill is triggered.

Tailwind CSS Advanced Layout Techniques

CSS Grid Mastery

Complex Grid Layouts

<!-- Holy Grail Layout -->
<div class="grid min-h-screen grid-rows-[auto_1fr_auto]">
  <header class="bg-white shadow">Header</header>
  <div class="grid grid-cols-[250px_1fr_300px]">
    <aside class="bg-gray-50 p-4">Sidebar</aside>
    <main class="p-6">Main Content</main>
    <aside class="bg-gray-50 p-4">Right Sidebar</aside>
  </div>
  <footer class="bg-gray-800 text-white">Footer</footer>
</div>

<!-- Responsive Holy Grail -->
<div class="grid min-h-screen grid-rows-[auto_1fr_auto]">
  <header>Header</header>
  <div class="grid grid-cols-1 md:grid-cols-[250px_1fr] lg:grid-cols-[250px_1fr_300px]">
    <aside class="order-2 md:order-1">Sidebar</aside>
    <main class="order-1 md:order-2">Main</main>
    <aside class="order-3 hidden lg:block">Right</aside>
  </div>
  <footer>Footer</footer>
</div>

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; }

<div class="grid grid-areas-dashboard grid-cols-[200px_1fr_250px] grid-rows-[60px_1fr_40px] min-h-screen">
  <header class="area-header bg-white shadow">Header</header>
  <nav class="area-nav bg-gray-100">Navigation</nav>
  <main class="area-main p-6">Main Content</main>
  <aside class="area-aside bg-gray-50 p-4">Sidebar</aside>
  <footer class="area-footer bg-gray-800 text-white">Footer</footer>
</div>

Auto-Fill and Auto-Fit Grids

<!-- Auto-fill: Creates as many tracks as fit, even empty ones -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-6">
  <div class="bg-white rounded-lg shadow p-4">Card 1</div>
  <div class="bg-white rounded-lg shadow p-4">Card 2</div>
  <div class="bg-white rounded-lg shadow p-4">Card 3</div>
</div>

<!-- Auto-fit: Collapses empty tracks -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-6">
  <!-- Cards stretch to fill available space -->
</div>

<!-- With arbitrary values -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(min(100%,300px),1fr))] gap-4">
  <!-- Handles edge case where container is smaller than minmax min -->
</div>

Subgrid

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

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

<div class="grid grid-cols-4 gap-4">
  <!-- Span 2 columns but align children to parent grid -->
  <div class="col-span-2 grid subgrid-cols gap-4">
    <div>Aligned to parent column 1</div>
    <div>Aligned to parent column 2</div>
  </div>
</div>

Advanced Flexbox Patterns

Space Distribution

<!-- Equal spacing with first/last at edges -->
<div class="flex justify-between">
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
</div>

<!-- Equal spacing everywhere including edges -->
<div class="flex justify-around">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

<!-- Double space between items vs edges -->
<div class="flex justify-evenly">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

Flexible Item Sizing

<!-- Items share space equally -->
<div class="flex">
  <div class="flex-1">1/3</div>
  <div class="flex-1">1/3</div>
  <div class="flex-1">1/3</div>
</div>

<!-- First item takes 2x space -->
<div class="flex">
  <div class="flex-[2]">2/4</div>
  <div class="flex-1">1/4</div>
  <div class="flex-1">1/4</div>
</div>

<!-- Fixed + flexible -->
<div class="flex">
  <div class="w-64 shrink-0">Fixed 256px</div>
  <div class="flex-1 min-w-0">Flexible (can shrink)</div>
</div>

<!-- Prevent shrinking with text overflow -->
<div class="flex min-w-0">
  <div class="shrink-0">Icon</div>
  <div class="min-w-0 truncate">Very long text that should truncate</div>
</div>

Masonry-Like with Flexbox

<!-- Column-based masonry -->
<div class="flex flex-col flex-wrap h-[800px] gap-4">
  <div class="w-[calc(33.333%-1rem)] h-48">Item 1</div>
  <div class="w-[calc(33.333%-1rem)] h-64">Item 2</div>
  <div class="w-[calc(33.333%-1rem)] h-32">Item 3</div>
  <!-- Items flow vertically then wrap to next column -->
</div>

Container Queries

Basic Container Queries

@plugin "@tailwindcss/container-queries";

<!-- Define container -->
<div class="@container">
  <!-- Respond to container width -->
  <div class="flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3 gap-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>
</div>

Named Containers

<!-- Multiple named containers -->
<div class="@container/sidebar">
  <nav class="@[200px]/sidebar:flex-col @[300px]/sidebar:flex-row">
    Navigation
  </nav>
</div>

<div class="@container/main">
  <article class="@[600px]/main:prose-lg @[900px]/main:prose-xl">
    Content
  </article>
</div>

Container Query Units

<!-- Size relative to container -->
<div class="@container">
  <h1 class="text-[5cqw]">Scales with container width</h1>
  <p class="text-[3cqi]">Scales with container inline size</p>
</div>

Position and Layering

Sticky Positioning

<!-- Sticky header -->
<header class="sticky top-0 z-50 bg-white/80 backdrop-blur-sm border-b">
  Navigation
</header>

<!-- Sticky sidebar -->
<aside class="sticky top-20 h-[calc(100vh-5rem)] overflow-auto">
  Sidebar content
</aside>

<!-- Sticky table header -->
<div class="overflow-auto max-h-96">
  <table>
    <thead class="sticky top-0 bg-white shadow">
      <tr>
        <th class="sticky left-0 bg-white z-10">Corner cell</th>
        <th>Column 2</th>
      </tr>
    </thead>
    <tbody>...</tbody>
  </table>
</div>

Fixed Elements

<!-- Fixed bottom navigation (mobile) -->
<nav class="fixed bottom-0 inset-x-0 z-50 bg-white border-t md:hidden">
  <div class="flex justify-around py-2">
    <a href="#">Home</a>
    <a href="#">Search</a>
    <a href="#">Profile</a>
  </div>
</nav>

<!-- Fixed action button -->
<button class="fixed bottom-6 right-6 z-40 rounded-full bg-brand-500 p-4 shadow-lg">
  <PlusIcon />
</button>

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

<!-- Horizontal carousel -->
<div class="flex snap-x snap-mandatory overflow-x-auto gap-4 pb-4">
  <div class="snap-start shrink-0 w-80">Card 1</div>
  <div class="snap-start shrink-0 w-80">Card 2</div>
  <div class="snap-start shrink-0 w-80">Card 3</div>
</div>

<!-- Full-page sections -->
<div class="h-screen snap-y snap-mandatory overflow-y-auto">
  <section class="h-screen snap-start">Section 1</section>
  <section class="h-screen snap-start">Section 2</section>
  <section class="h-screen snap-start">Section 3</section>
</div>

<!-- Snap with padding -->
<div class="snap-x scroll-pl-6 overflow-x-auto">
  <div class="snap-start">...</div>
</div>

Scroll Margin for Anchors

<!-- Offset for fixed header -->
<section id="about" class="scroll-mt-20">
  <!-- Content appears below fixed header when linked -->
</section>

Aspect Ratio and Object Fit

Responsive Aspect Ratios

<!-- Fixed aspect ratio container -->
<div class="aspect-video bg-gray-100">
  <video class="h-full w-full object-cover">...</video>
</div>

<div class="aspect-square rounded-full overflow-hidden">
  <img src="avatar.jpg" class="h-full w-full object-cover" />
</div>

<!-- Custom aspect ratio -->
<div class="aspect-[4/3]">4:3 content</div>
<div class="aspect-[21/9]">Ultra-wide content</div>

Object Positioning

<!-- Focus on specific part of image -->
<div class="h-64 overflow-hidden">
  <img
    src="portrait.jpg"
    class="h-full w-full object-cover object-top"
  />
</div>

<!-- Arbitrary object position -->
<img class="object-cover object-[25%_75%]" src="..." />

Advanced Spacing

Logical Properties

<!-- Works for LTR and RTL -->
<div class="ps-4 pe-6 ms-auto">
  Padding and margin that respect text direction
</div>

<!-- Block direction (vertical in horizontal writing modes) -->
<div class="pbs-4 pbe-6 mbs-auto">
  Block-direction spacing
</div>

Space Between with Dividers

<!-- Dividers between items -->
<ul class="divide-y divide-gray-200">
  <li class="py-4">Item 1</li>
  <li class="py-4">Item 2</li>
  <li class="py-4">Item 3</li>
</ul>

<!-- Horizontal dividers -->
<div class="flex divide-x divide-gray-200">
  <div class="px-4">Section 1</div>
  <div class="px-4">Section 2</div>
  <div class="px-4">Section 3</div>
</div>

Negative Margins for Bleeds

<!-- Full-bleed image in padded container -->
<article class="px-6">
  <p>Padded content</p>
  <img src="hero.jpg" class="-mx-6 w-[calc(100%+3rem)]" />
  <p>More padded content</p>
</article>

<!-- Pull quote that breaks out -->
<div class="max-w-prose mx-auto px-4">
  <p>Normal content...</p>
  <blockquote class="-mx-8 md:-mx-16 px-8 md:px-16 py-8 bg-gray-100">
    Featured quote that extends beyond content width
  </blockquote>
</div>

Multi-Column Layout

Text Columns

<!-- Responsive columns -->
<div class="columns-1 sm:columns-2 lg:columns-3 gap-8">
  <p>Content flows across columns...</p>
</div>

<!-- Fixed-width columns -->
<div class="columns-[300px] gap-6">
  <p>Creates as many 300px columns as fit</p>
</div>

<!-- Prevent breaks inside elements -->
<div class="columns-2">
  <div class="break-inside-avoid mb-4">
    Card that stays together
  </div>
</div>

Responsive Patterns

Container Queries + Media Queries

<div class="@container">
  <div class="
    /* Container query for component-level responsiveness */
    @md:flex @md:gap-4

    /* Media query for page-level responsiveness */
    lg:grid lg:grid-cols-2
  ">
    Content
  </div>
</div>

Breakpoint-Based Visibility

<!-- Show different content per breakpoint -->
<nav>
  <!-- Mobile menu button -->
  <button class="md:hidden">Menu</button>

  <!-- Desktop navigation -->
  <ul class="hidden md:flex gap-4">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

Fluid Sizing with Clamp

<!-- Fluid padding -->
<section class="py-[clamp(2rem,5vw,6rem)] px-[clamp(1rem,3vw,4rem)]">
  Content with responsive padding
</section>

<!-- Fluid max-width -->
<div class="mx-auto w-full max-w-[clamp(300px,90vw,1200px)]">
  Responsive container
</div>

Print Styles

<!-- Hide elements when printing -->
<nav class="print:hidden">Navigation</nav>

<!-- Show only when printing -->
<div class="hidden print:block">Print-only content</div>

<!-- Print-specific styles -->
<article class="print:text-black print:bg-white">
  <h1 class="text-2xl print:text-xl">Heading</h1>
  <a href="..." class="text-blue-500 print:text-black print:underline">
    Link (shows as text when printed)
  </a>
</article>

<!-- Prevent page breaks -->
<div class="print:break-inside-avoid">
  Keep this content together on one page
</div>

<!-- Force page break -->
<div class="print:break-before-page">
  Start on new page
</div>

Best Practices

1. Use Modern Layout Methods

<!-- Prefer Grid for 2D layouts -->
<div class="grid grid-cols-3 gap-4">

<!-- Prefer Flexbox for 1D layouts -->
<div class="flex items-center gap-2">

2. Handle Edge Cases

<!-- Prevent flex item from overflowing -->
<div class="flex min-w-0">
  <div class="min-w-0 truncate">Long text</div>
</div>

<!-- Prevent grid blowout -->
<div class="grid grid-cols-1 min-w-0">
  <div class="overflow-hidden">Content that might overflow</div>
</div>

3. Use Semantic Sizing

<!-- Prefer max-w-prose for reading content -->
<article class="max-w-prose mx-auto">

<!-- Use container for page sections -->
<div class="container mx-auto px-4">

4. Test All Breakpoints

Create systematic tests for all responsive layouts to ensure they work at every breakpoint.

FAQ

What does the tailwindcss-advanced-layouts skill do?

How do I install tailwindcss-advanced-layouts?

Run npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace --skill tailwindcss-advanced-layouts in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/tailwindcss-advanced-layouts/ (personal) or .claude/skills/tailwindcss-advanced-layouts/ (project).

Which AI agents can use tailwindcss-advanced-layouts?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is tailwindcss-advanced-layouts safe to install?

Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk passed; Runlayer passed. As with any skill, read the SKILL.md and bundled scripts before installing.

Who maintains tailwindcss-advanced-layouts?

It is published by josiahsiegel in josiahsiegel/claude-plugin-marketplace. It has 8,139 recorded installs.