62 lines
1.4 KiB
Markdown
62 lines
1.4 KiB
Markdown
---
|
||
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 的完整定义和示例代码
|