name: designing-layouts description: 设计布局系统和响应式界面，包括网格系统、flexbox模式、侧边栏布局和响应式断点。用于构建应用布局、响应式设计或创建复杂页面结构。

布局系统与响应式设计

目的

这个技能提供使用现代CSS技术创建响应式布局系统的全面指导。它涵盖网格系统、flexbox模式、容器查询、间距系统和移动优先设计策略，以构建灵活、可访问的界面，无缝适应各种设备。

何时使用

在以下情况调用此技能：

构建带有侧边栏和标题的响应式管理仪表板
为内容卡片或画廊创建基于网格的布局
实现砌体或Pinterest风格布局
设计带有可调整面板的分割窗格界面
建立响应式断点系统
构建带有导航和内容区域的应用外壳
构建移动优先的响应式设计
创建灵活的间距和容器系统

布局模式

网格系统

对于结构化的二维布局，使用带有设计令牌的CSS Grid。

12列网格：

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding-x);
}

.col-span-6 { grid-column: span 6; }
.col-span-4 { grid-column: span 4; }
.col-span-3 { grid-column: span 3; }

自适应响应式网格：

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--grid-gap);
}

对于复杂的网格布局和高级模式，参见 references/layout-patterns.md。

Flexbox模式

对于一维布局和对齐控制。

圣杯布局：

.holy-grail {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.holy-grail__body {
  flex: 1;
  display: flex;
}

.holy-grail__nav {
  width: var(--sidebar-width);
  flex-shrink: 0;
}

.holy-grail__main {
  flex: 1;
  min-width: 0; /* 防止溢出 */
}

.holy-grail__aside {
  width: var(--sidebar-width);
  flex-shrink: 0;
}

对于其他flexbox模式，包括粘性页脚和居中，参见 references/css-techniques.md。

容器查询

对于基于容器大小而不是视口响应的组件设计。

.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    grid-template-columns: auto 1fr;
    gap: var(--spacing-lg);
  }
}

@container card (min-width: 600px) {
  .card {
    grid-template-columns: 200px 1fr auto;
  }
}

容器查询在所有现代浏览器中生产就绪（2025年）。对于详细用法和回退策略，参见 references/responsive-strategies.md。

响应式断点

使用带有语义断点的移动优先方法。

/* 使用设计令牌的移动优先断点 */
@media (min-width: 640px) {  /* sm: 平板竖屏 */
  .container { max-width: 640px; }
}

@media (min-width: 768px) {  /* md: 平板横屏 */
  .container { max-width: 768px; }
}

@media (min-width: 1024px) { /* lg: 桌面 */
  .container { max-width: 1024px; }
}

@media (min-width: 1280px) { /* xl: 宽桌面 */
  .container { max-width: 1280px; }
}

@media (min-width: 1536px) { /* 2xl: 超宽 */
  .container { max-width: 1536px; }
}

对于流体字体和高级响应式技术，参见 references/responsive-strategies.md。

间距系统

使用设计令牌实现一致的间距。

/* 基础单位：4px或8px */
:root {
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
}

/* 系统应用 */
.section { padding: var(--section-spacing) 0; }
.container { padding: 0 var(--container-padding-x); }
.card { padding: var(--spacing-lg); }
.stack > * + * { margin-top: var(--spacing-md); }

CSS框架集成

Tailwind CSS

对于带有自定义配置的实用优先方法：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        'xs': 'var(--spacing-xs)',
        'sm': 'var(--spacing-sm)',
        'md': 'var(--spacing-md)',
        'lg': 'var(--spacing-lg)',
        'xl': 'var(--spacing-xl)',
      },
      screens: {
        'sm': '640px',
        'md': '768px',
        'lg': '1024px',
        'xl': '1280px',
        '2xl': '1536px',
      }
    }
  }
}

对于Tailwind模式和优化，参见 references/library-guide.md。

如何使用

1. 定义布局需求

确定所需的布局类型和响应行为。

2. 选择布局方法

CSS Grid: 二维布局，复杂网格
Flexbox: 一维布局，对齐
容器查询: 组件响应式设计

3. 使用设计令牌实现

从 skills/design-tokens/ 使用设计令牌实现一致的间距、断点和尺寸。

4. 生成配置

对于响应式断点：

node scripts/generate_breakpoints.js --approach mobile-first

对于流体字体比例：

node scripts/calculate_fluid_typography.js --min-vw 320 --max-vw 1920

5. 验证可访问性

检查语义HTML和地标区域：

node scripts/validate_layout_accessibility.js path/to/component.tsx

6. 测试响应性

使用响应式预览工具和实际设备测试不同设备尺寸。

脚本

scripts/generate_breakpoints.js - 生成响应式断点系统
scripts/calculate_fluid_typography.js - 计算流体字体比例
scripts/validate_layout_accessibility.js - 验证语义HTML和ARIA地标

参考

references/layout-patterns.md - 常见布局模式（侧边栏、砌体、分割窗格）
references/responsive-strategies.md - 移动优先设计和响应式技术
references/css-techniques.md - 现代CSS特性（Grid、Flexbox、容器查询）
references/accessibility-layouts.md - 语义HTML和ARIA地标
references/library-guide.md - 框架集成（Tailwind、styled-components）
references/performance-optimization.md - CSS性能和布局抖动

示例

examples/admin-layout.tsx - 带有侧边栏的完整管理仪表板
examples/responsive-grid.tsx - 自适应响应式网格系统
examples/masonry-layout.tsx - Pinterest风格砌体网格
examples/split-pane.tsx - 可调整的分割窗格界面

资产

assets/breakpoint-config.json - 标准断点配置
assets/layout-templates.json - 常见布局模板
assets/spacing-scale.json - 间距系统配置