nexus/wiki/concepts/Layout-Framework.md

title, type, tags, sources, last_updated

title	type	tags	sources	last_updated
Layout Framework	concept	css layout responsive grid flexbox	design-ux-architect.md	2026-04-24

Definition

Layout Framework 是基于 CSS Grid 和 Flexbox 的响应式布局系统，定义容器、网格、间距和断点规范，为开发者提供可信赖的实现基础。

Container System

• Mobile：全宽，16px padding
• Tablet：768px max-width，居中
• Desktop：1024px max-width，居中
• Large：1280px max-width，居中

.container {
  width: 100%;
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

Grid Patterns

.grid-2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

@media (max-width: 768px) {
  .grid-2-col {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

Component Hierarchy

1. Layout Components：containers, grids, sections
2. Content Components：cards, articles, media
3. Interactive Components：buttons, forms, navigation
4. Utility Components：spacing, typography, colors

Related Concepts

• CSS-Design-System：提供设计 Token 支撑布局系统
• Responsive-Breakpoints：移动优先断点策略
• Component-Architecture：组件命名和层级结构

Sources

• design-ux-architect — Layout Framework 的完整定义和示例代码