designing-layouts

布局系统与响应式设计

用途

此技能提供使用现代 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; /* Prevent overflow */
}

.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。

响应式断点

采用移动优先的方法，并使用语义化断点。

/* Mobile-first breakpoints using design tokens */
@media (min-width: 640px) {  /* sm: Tablet portrait */
  .container { max-width: 640px; }
}

@media (min-width: 768px) {  /* md: Tablet landscape */
  .container { max-width: 768px; }
}

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

@media (min-width: 1280px) { /* xl: Wide desktop */
  .container { max-width: 1280px; }
}

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

有关流式排版和高级响应式技术，请参阅 references/responsive-strategies.md。

间距系统

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

/* Base unit: 4px or 8px */
:root {
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
}

/* Apply systematically */
.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

• assets/breakpoint-config.json - Standard breakpoint configurations
• assets/layout-templates.json - Common layout templates
• assets/spacing-scale.json - Spacing system configurations