---
title: "Layout Framework"
type: concept
tags: [css, layout, responsive, grid, flexbox]
sources: [design-ux-architect.md]
last_updated: 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，居中

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

## Grid Patterns

```css
.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 的完整定义和示例代码