Update nexus wiki content

wiki/concepts/Layout-Framework.md

@@ -0,0 +1,61 @@
+---
+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 的完整定义和示例代码