Grid 提供二维布局能力，适合构建复杂界面。

核心概念

• Grid 定义行列轨道与轨道尺寸。
• grid-template-areas 提升语义化。
• auto-fit 与 minmax 支持自适应。

实战步骤

• 实现响应式仪表盘布局。
• 使用 repeat 与 fr 简化规则。
• 结合 grid-auto-flow 控制自动布局。

Flexbox 专注一维布局，适合构建自适应组件与导航。

核心概念

• 主轴、侧轴概念决定元素对齐方式。
• flex-grow、flex-shrink、flex-basis 控制空间分配。
• 容器与项目属性需协同配置。

实战步骤

• 实现响应式导航栏与卡片布局。
• 使用 gap 替代 margin 控制间距。
• 结合媒体查询调整 flex-direction。