Back to Details

designing-layouts

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Layout Systems & Responsive Design

布局系统与响应式设计

Purpose

用途

This skill provides comprehensive guidance for creating responsive layout systems using modern CSS techniques. It covers grid systems, flexbox patterns, container queries, spacing systems, and mobile-first design strategies to build flexible, accessible interfaces that adapt seamlessly across devices.
本技能提供使用现代CSS技术创建响应式布局系统的全面指南。内容涵盖网格系统、Flexbox模式、Container Queries、间距系统以及移动端优先的设计策略，助力构建可灵活适配各类设备的无障碍界面。

When to Use

使用场景

Invoke this skill when:
  • Building responsive admin dashboards with sidebars and headers
  • Creating grid-based layouts for content cards or galleries
  • Implementing masonry or Pinterest-style layouts
  • Designing split-pane interfaces with resizable panels
  • Establishing responsive breakpoint systems
  • Structuring application shells with navigation and content areas
  • Building mobile-first responsive designs
  • Creating flexible spacing and container systems
在以下场景中调用本技能：
  • 构建带侧边栏和页眉的响应式管理仪表盘
  • 为内容卡片或图库创建基于网格的布局
  • 实现瀑布流或Pinterest风格布局
  • 设计带可调整面板的分栏界面
  • 搭建响应式断点系统
  • 构建包含导航区和内容区的应用框架
  • 开发移动端优先的响应式设计
  • 创建灵活的间距与容器系统

Layout Patterns

布局模式

Grid Systems

网格系统

For structured, two-dimensional layouts, use CSS Grid with design tokens.
12-Column Grid:
css
.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-Fit Responsive Grid:
css
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--grid-gap);
}
For complex grid layouts and advanced patterns, see 
references/layout-patterns.md
.
对于结构化的二维布局，结合design tokens使用CSS Grid。
12列网格：
css
.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; }
自适应响应式网格：
css
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--grid-gap);
}
如需了解复杂网格布局及进阶模式，请查看
references/layout-patterns.md
。

Flexbox Patterns

Flexbox模式

For one-dimensional layouts and alignment control.
Holy Grail Layout:
css
.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;
}
For additional flexbox patterns including sticky footer and centering, see 
references/css-techniques.md
.
适用于一维布局与对齐控制。
圣杯布局：
css
.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
。

Container Queries

Container Queries

For component-responsive design that adapts based on container size, not viewport.
css
.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;
  }
}
Container queries are production-ready in all modern browsers (2025). For detailed usage and fallback strategies, see 
references/responsive-strategies.md
.
适用于基于容器尺寸而非视口尺寸的组件响应式设计。
css
.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;
  }
}
Container Queries在所有现代浏览器中已可投入生产使用（2025年）。如需详细用法及降级策略，请查看
references/responsive-strategies.md
。

Responsive Breakpoints

响应式断点

Use mobile-first approach with semantic breakpoints.
css
/* 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; }
}
For fluid typography and advanced responsive techniques, see 
references/responsive-strategies.md
.
采用语义化断点结合移动端优先的方法。
css
/* 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
。

Spacing Systems

间距系统

Implement consistent spacing using design tokens.
css
/* 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); }
使用design tokens实现统一的间距。
css
/* 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 Framework Integration

CSS框架集成

Tailwind CSS

Tailwind CSS

For utility-first approach with custom configuration:
javascript
// 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',
      }
    }
  }
}
For Tailwind patterns and optimization, see 
references/library-guide.md
.
适用于采用自定义配置的实用优先方案：
javascript
// 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
。

How to Use

使用步骤

1. Define Layout Requirements

1. 确定布局需求

Determine layout type and responsive behavior needed.
明确所需的布局类型及响应式表现。

2. Choose Layout Method

2. 选择布局方法

  • CSS Grid: Two-dimensional layouts, complex grids
  • Flexbox: One-dimensional layouts, alignment
  • Container Queries: Component-responsive designs
  • CSS Grid：二维布局、复杂网格
  • Flexbox：一维布局、对齐控制
  • Container Queries：组件响应式设计

3. Implement with Design Tokens

3. 结合Design Tokens实现

Use design tokens from 
skills/design-tokens/
for consistent spacing, breakpoints, and sizing.
使用
skills/design-tokens/
中的design tokens确保间距、断点及尺寸的一致性。

4. Generate Configurations

4. 生成配置

For responsive breakpoints:
bash
node scripts/generate_breakpoints.js --approach mobile-first
For fluid typography scale:
bash
node scripts/calculate_fluid_typography.js --min-vw 320 --max-vw 1920
生成响应式断点：
bash
node scripts/generate_breakpoints.js --approach mobile-first
生成流式排版比例：
bash
node scripts/calculate_fluid_typography.js --min-vw 320 --max-vw 1920

5. Validate Accessibility

5. 验证无障碍性

Check semantic HTML and landmark regions:
bash
node scripts/validate_layout_accessibility.js path/to/component.tsx
检查语义化HTML及地标区域：
bash
node scripts/validate_layout_accessibility.js path/to/component.tsx

6. Test Responsiveness

6. 测试响应性

Test across device sizes using responsive preview tools and actual devices.
使用响应式预览工具及真实设备，在不同尺寸设备上进行测试。

Scripts

脚本

  • scripts/generate_breakpoints.js
    - Generate responsive breakpoint system
  • scripts/calculate_fluid_typography.js
    - Calculate fluid typography scales
  • scripts/validate_layout_accessibility.js
    - Validate semantic HTML and ARIA landmarks
  • scripts/generate_breakpoints.js
    - 生成响应式断点系统
  • scripts/calculate_fluid_typography.js
    - 计算流式排版比例
  • scripts/validate_layout_accessibility.js
    - 验证语义化HTML及ARIA地标

References

参考资料

  • references/layout-patterns.md
    - Common layout patterns (sidebar, masonry, split-pane)
  • references/responsive-strategies.md
    - Mobile-first design and responsive techniques
  • references/css-techniques.md
    - Modern CSS features (Grid, Flexbox, Container Queries)
  • references/accessibility-layouts.md
    - Semantic HTML and ARIA landmarks
  • references/library-guide.md
    - Framework integration (Tailwind, styled-components)
  • references/performance-optimization.md
    - CSS performance and layout thrashing
  • references/layout-patterns.md
    - 常见布局模式（侧边栏、瀑布流、分栏）
  • references/responsive-strategies.md
    - 移动端优先设计及响应式技术
  • references/css-techniques.md
    - 现代CSS特性（Grid、Flexbox、Container Queries）
  • references/accessibility-layouts.md
    - 语义化HTML及ARIA地标
  • references/library-guide.md
    - 框架集成（Tailwind、styled-components）
  • references/performance-optimization.md
    - CSS性能及布局抖动优化

Examples

示例

  • examples/admin-layout.tsx
    - Complete admin dashboard with sidebar
  • examples/responsive-grid.tsx
    - Auto-responsive grid system
  • examples/masonry-layout.tsx
    - Pinterest-style masonry grid
  • examples/split-pane.tsx
    - Resizable split-pane interface
  • 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
  • assets/breakpoint-config.json
    - 标准断点配置
  • assets/layout-templates.json
    - 常见布局模板
  • assets/spacing-scale.json
    - 间距系统配置