section 是语义容器而非布局工具，其本身无默认对齐行为；真正实现精准对齐的是 CSS Grid，需显式设置 grid 属性，且须兼顾语义结构与响应式适配。
section 标签本身不带默认布局行为，它只是语义化的区块容器；真正实现对齐效果的是 CSS Grid —— 二者结合，既能保持结构清晰，又能精准控制视觉对齐。
section 是语义容器，不是布局工具
section 表达“一个主题性内容区块”，比如“联系信息”“产品参数”“用户反馈”。它不规定内部如何排列，也不自带对齐逻辑。若直接给 section 加 display: grid，只是把它变成网格容器，对齐能力来自 grid 属性，而非 section 标签本身。
常见误区：
- 误以为加了 section 就自动对齐 —— 实际需显式设置 grid-template-columns、justify-items 等
- 用多个 section 堆叠替代网格项划分 —— 导致嵌套过深、列对齐断裂
- 忽略 section 的语义边界，在其中强行塞入跨区域的 grid-area —— 削弱可访问性和 SEO
用 Grid 对齐 section 内部的表单或列表
典型场景：一个 section 包含多组标签-值对（如用户资料），需要右对齐标签、冒号居中、内容左对齐且纵向严格对齐。
立即学习“前端免费学习笔记（深入）”；
推荐写法：
- section 设为 display: grid，并定义三列：grid-template-columns: max-content auto 1fr
- 每个字段用 div 包裹 label、span.colon、span.value，作为直接子项
- label 设置 text-align: right；colon 设置 justify-self: center；value 默认左对齐
- 避免在 section 内再嵌套 grid 容器——除非语义上确需子区块（如“地址”单独成 section）
响应式中 section 与 Grid 的协同处理
在小屏下，section 仍保留语义，但 Grid 可切换布局模式，不影响结构含义：
- @media (max-width: 600px) 中将 grid-template-columns 改为 1fr，让每行独占一列
- 隐藏 .colon，label 改为 left 对齐，更符合移动端阅读习惯
- section 的 margin/padding 可独立调整，不干扰 grid 对齐逻辑
- 屏幕阅读器仍按 section 语义朗读，Grid 仅影响视觉呈现
避免混淆语义与样式层级
section 应反映内容逻辑分组，而非只为 Grid 对齐而存在。例如：
- ✅ 正确：一个 section 表示“订单摘要”，内含 grid 排列的“商品名｜数量｜单价”三列
- ❌ 错误：为让两个不相关字段横向对齐，硬拆成两个 section 再用 grid 外层包裹——破坏语义连贯性
- ✅ 更优：用一个 section + grid，字段用语义化 class（如 .field-product、.field-qty）区分，而非靠标签名
