Back to Details

tailwindcss-advanced-layouts

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Tailwind CSS Advanced Layout Techniques

Tailwind CSS 高级布局技巧

CSS Grid Mastery

CSS Grid 精通指南

Complex Grid Layouts

复杂网格布局

html
<!-- 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>
html
<!-- 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

Grid Template Areas（网格模板区域）

css
@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; }
html
<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>
css
@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; }
html
<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 和 Auto-Fit 网格

html
<!-- 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>
html
<!-- Auto-fill: 创建尽可能多的轨道，包括空轨道 -->
<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: 折叠空轨道 -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-6">
  <!-- 卡片会拉伸以填充可用空间 -->
</div>

<!-- 使用自定义值 -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(min(100%,300px),1fr))] gap-4">
  <!-- 处理容器小于minmax最小值的边缘情况 -->
</div>

Subgrid

子网格（Subgrid）

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

@utility subgrid-rows {
  grid-template-rows: subgrid;
}
html
<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>
css
/* 在v4中启用子网格 */
@utility subgrid-cols {
  grid-template-columns: subgrid;
}

@utility subgrid-rows {
  grid-template-rows: subgrid;
}
html
<div class="grid grid-cols-4 gap-4">
  <!-- 跨2列，但子元素与父网格对齐 -->
  <div class="col-span-2 grid subgrid-cols gap-4">
    <div>与父网格第1列对齐</div>
    <div>与父网格第2列对齐</div>
  </div>
</div>

Advanced Flexbox Patterns

高级Flexbox模式

Space Distribution

空间分配

html
<!-- 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>
html
<!-- 两端对齐，首尾元素在边缘 -->
<div class="flex justify-between">
  <div>第一个</div>
  <div>第二个</div>
  <div>第三个</div>
</div>

<!-- 所有空间均匀分布，包括边缘 -->
<div class="flex justify-around">
  <div>项目</div>
  <div>项目</div>
  <div>项目</div>
</div>

<!-- 项目间间距是边缘间距的两倍 -->
<div class="flex justify-evenly">
  <div>项目</div>
  <div>项目</div>
  <div>项目</div>
</div>

Flexible Item Sizing

灵活项目尺寸

html
<!-- 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>
html
<!-- 项目平均分配空间 -->
<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>

<!-- 第一个项目占用2倍空间 -->
<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>

<!-- 固定尺寸 + 灵活尺寸 -->
<div class="flex">
  <div class="w-64 shrink-0">固定256px</div>
  <div class="flex-1 min-w-0">灵活尺寸（可收缩）</div>
</div>

<!-- 防止文本溢出时收缩 -->
<div class="flex min-w-0">
  <div class="shrink-0">图标</div>
  <div class="min-w-0 truncate">应该被截断的超长文本</div>
</div>

Masonry-Like with Flexbox

类瀑布流布局（Flexbox实现）

html
<!-- 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>
html
<!-- 基于列的瀑布流 -->
<div class="flex flex-col flex-wrap h-[800px] gap-4">
  <div class="w-[calc(33.333%-1rem)] h-48">项目1</div>
  <div class="w-[calc(33.333%-1rem)] h-64">项目2</div>
  <div class="w-[calc(33.333%-1rem)] h-32">项目3</div>
  <!-- 项目垂直排列后换行到下一列 -->
</div>

Container Queries

容器查询（Container Queries）

Basic Container Queries

基础容器查询

css
@plugin "@tailwindcss/container-queries";
html
<!-- 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>
css
@plugin "@tailwindcss/container-queries";
html
<!-- 定义容器 -->
<div class="@container">
  <!-- 根据容器宽度响应式变化 -->
  <div class="flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3 gap-4">
    <div>项目1</div>
    <div>项目2</div>
    <div>项目3</div>
  </div>
</div>

Named Containers

命名容器

html
<!-- 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>
html
<!-- 多个命名容器 -->
<div class="@container/sidebar">
  <nav class="@[200px]/sidebar:flex-col @[300px]/sidebar:flex-row">
    导航
  </nav>
</div>

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

Container Query Units

容器查询单位

html
<!-- 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>
html
<!-- 相对于容器的尺寸 -->
<div class="@container">
  <h1 class="text-[5cqw]">随容器宽度缩放</h1>
  <p class="text-[3cqi]">随容器内联尺寸缩放</p>
</div>

Position and Layering

定位与分层

Sticky Positioning

粘性定位（Sticky Positioning）

html
<!-- 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>
html
<!-- 粘性头部 -->
<header class="sticky top-0 z-50 bg-white/80 backdrop-blur-sm border-b">
  导航
</header>

<!-- 粘性侧边栏 -->
<aside class="sticky top-20 h-[calc(100vh-5rem)] overflow-auto">
  侧边栏内容
</aside>

<!-- 粘性表格头部 -->
<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">角落单元格</th>
        <th>列2</th>
      </tr>
    </thead>
    <tbody>...</tbody>
  </table>
</div>

Fixed Elements

固定元素

html
<!-- 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>
html
<!-- 底部固定导航（移动端） -->
<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="#">首页</a>
    <a href="#">搜索</a>
    <a href="#">个人中心</a>
  </div>
</nav>

<!-- 固定操作按钮 -->
<button class="fixed bottom-6 right-6 z-40 rounded-full bg-brand-500 p-4 shadow-lg">
  <PlusIcon />
</button>

Z-Index Management

Z-Index 管理

css
@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); }
css
@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

自定义滚动条

css
@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);
}
css
@utility scrollbar-thin {
  scrollbar-width: thin;
}

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

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

/* 自定义滚动条样式 */
@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 Snap）

html
<!-- 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>
html
<!-- 横向轮播 -->
<div class="flex snap-x snap-mandatory overflow-x-auto gap-4 pb-4">
  <div class="snap-start shrink-0 w-80">卡片1</div>
  <div class="snap-start shrink-0 w-80">卡片2</div>
  <div class="snap-start shrink-0 w-80">卡片3</div>
</div>

<!-- 全屏区块滚动 -->
<div class="h-screen snap-y snap-mandatory overflow-y-auto">
  <section class="h-screen snap-start">区块1</section>
  <section class="h-screen snap-start">区块2</section>
  <section class="h-screen snap-start">区块3</section>
</div>

<!-- 带内边距的滚动吸附 -->
<div class="snap-x scroll-pl-6 overflow-x-auto">
  <div class="snap-start">...</div>
</div>

Scroll Margin for Anchors

锚点滚动边距

html
<!-- Offset for fixed header -->
<section id="about" class="scroll-mt-20">
  <!-- Content appears below fixed header when linked -->
</section>
html
<!-- 为固定头部设置偏移 -->
<section id="about" class="scroll-mt-20">
  <!-- 点击链接时内容会显示在固定头部下方 -->
</section>

Aspect Ratio and Object Fit

宽高比与对象适配

Responsive Aspect Ratios

响应式宽高比

html
<!-- 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>
html
<!-- 固定宽高比容器 -->
<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>

<!-- 自定义宽高比 -->
<div class="aspect-[4/3]">4:3 内容</div>
<div class="aspect-[21/9]">超宽内容</div>

Object Positioning

对象定位

html
<!-- 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="..." />
html
<!-- 聚焦图片特定区域 -->
<div class="h-64 overflow-hidden">
  <img
    src="portrait.jpg"
    class="h-full w-full object-cover object-top"
  />
</div>

<!-- 自定义对象位置 -->
<img class="object-cover object-[25%_75%]" src="..." />

Advanced Spacing

高级间距

Logical Properties

逻辑属性

html
<!-- 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>
html
<!-- 支持LTR和RTL方向 -->
<div class="ps-4 pe-6 ms-auto">
  遵循文本方向的内边距和外边距
</div>

<!-- 块级方向（水平书写模式下为垂直方向） -->
<div class="pbs-4 pbe-6 mbs-auto">
  块级方向间距
</div>

Space Between with Dividers

带分隔线的项目间距

html
<!-- 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>
html
<!-- 项目间的分隔线 -->
<ul class="divide-y divide-gray-200">
  <li class="py-4">项目1</li>
  <li class="py-4">项目2</li>
  <li class="py-4">项目3</li>
</ul>

<!-- 横向分隔线 -->
<div class="flex divide-x divide-gray-200">
  <div class="px-4">区块1</div>
  <div class="px-4">区块2</div>
  <div class="px-4">区块3</div>
</div>

Negative Margins for Bleeds

负边距实现全屏溢出

html
<!-- 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>
html
<!-- 带内边距容器中的全屏图片 -->
<article class="px-6">
  <p>带内边距的内容</p>
  <img src="hero.jpg" class="-mx-6 w-[calc(100%+3rem)]" />
  <p>更多带内边距的内容</p>
</article>

<!-- 超出内容宽度的引用块 -->
<div class="max-w-prose mx-auto px-4">
  <p>普通内容...</p>
  <blockquote class="-mx-8 md:-mx-16 px-8 md:px-16 py-8 bg-gray-100">
    超出内容宽度的特色引用
  </blockquote>
</div>

Multi-Column Layout

多列布局

Text Columns

文本分栏

html
<!-- 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>
html
<!-- 响应式分栏 -->
<div class="columns-1 sm:columns-2 lg:columns-3 gap-8">
  <p>内容在多列间流动...</p>
</div>

<!-- 固定宽度分栏 -->
<div class="columns-[300px] gap-6">
  <p>创建尽可能多的300px宽度列</p>
</div>

<!-- 防止元素被拆分到不同列 -->
<div class="columns-2">
  <div class="break-inside-avoid mb-4">
    保持完整的卡片
  </div>
</div>

Responsive Patterns

响应式模式

Container Queries + Media Queries

容器查询 + 媒体查询

html
<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>
html
<div class="@container">
  <div class="
    /* 组件级响应式的容器查询 */
    @md:flex @md:gap-4

    /* 页面级响应式的媒体查询 */
    lg:grid lg:grid-cols-2
  ">
    内容
  </div>
</div>

Breakpoint-Based Visibility

基于断点的可见性

html
<!-- 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>
html
<!-- 不同断点显示不同内容 -->
<nav>
  <!-- 移动端菜单按钮 -->
  <button class="md:hidden">菜单</button>

  <!-- 桌面端导航 -->
  <ul class="hidden md:flex gap-4">
    <li>首页</li>
    <li>关于我们</li>
    <li>联系我们</li>
  </ul>
</nav>

Fluid Sizing with Clamp

Clamp实现流体尺寸

html
<!-- 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>
html
<!-- 流体内边距 -->
<section class="py-[clamp(2rem,5vw,6rem)] px-[clamp(1rem,3vw,4rem)]">
  带响应式内边距的内容
</section>

<!-- 流体最大宽度 -->
<div class="mx-auto w-full max-w-[clamp(300px,90vw,1200px)]">
  响应式容器
</div>

Print Styles

打印样式

html
<!-- 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>
html
<!-- 打印时隐藏元素 -->
<nav class="print:hidden">导航</nav>

<!-- 仅打印时显示 -->
<div class="hidden print:block">仅打印内容</div>

<!-- 打印专属样式 -->
<article class="print:text-black print:bg-white">
  <h1 class="text-2xl print:text-xl">标题</h1>
  <a href="..." class="text-blue-500 print:text-black print:underline">
    链接（打印时显示为文本）
  </a>
</article>

<!-- 防止分页拆分 -->
<div class="print:break-inside-avoid">
  保持此内容在同一页
</div>

<!-- 强制分页 -->
<div class="print:break-before-page">
  新页面开始
</div>

Best Practices

最佳实践

1. Use Modern Layout Methods

1. 使用现代布局方法

html
<!-- 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">
html
<!-- 二维布局优先使用Grid -->
<div class="grid grid-cols-3 gap-4">

<!-- 一维布局优先使用Flexbox -->
<div class="flex items-center gap-2">

2. Handle Edge Cases

2. 处理边缘情况

html
<!-- 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>
html
<!-- 防止Flex项目溢出 -->
<div class="flex min-w-0">
  <div class="min-w-0 truncate">长文本</div>
</div>

<!-- 防止Grid布局溢出 -->
<div class="grid grid-cols-1 min-w-0">
  <div class="overflow-hidden">可能溢出的内容</div>
</div>

3. Use Semantic Sizing

3. 使用语义化尺寸

html
<!-- 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">
html
<!-- 阅读内容优先使用max-w-prose -->
<article class="max-w-prose mx-auto">

<!-- 页面区块使用container -->
<div class="container mx-auto px-4">

4. Test All Breakpoints

4. 测试所有断点

Create systematic tests for all responsive layouts to ensure they work at every breakpoint.
为所有响应式布局创建系统测试，确保在每个断点都能正常工作。