CSS Grid 适合解决哪些布局问题？
与只擅长一维单向流排版的 Flexbox（行或列）不同，CSS Grid 是 W3C 原生支持的真正二维网格系统（行与列同时受控）。它允许子元素自由跨越任意行列（`grid-column: 1 / -1`），无需在 HTML 中嵌套冗余的包装容器 div，彻底终结了早年使用浮动 float 或定位 hack 造成的排版崩溃问题。
常用 CSS Grid 核心属性速查
grid-template-columns: repeat(3, 1fr)：定义 3 列均分可用剩余空间的自适应轨道。gap: 16px：声明行列间距，告别在子元素上写 margin 造成的边缘多余边距。grid-column: span 2：指定当前单元格在水平方向横跨占据两列宽度。