面试题：Grid 和 Flex 怎么选？常用属性？

选型

• Flex：一维布局（单行或单列的主轴分配），导航、工具条、等分栏。
• Grid：二维布局（同时管行与列），整页骨架、不规则区域、对齐到网格线。

容器常用

• grid-template-columns/rows：轨道定义；fr 分剩余空间；repeat(auto-fill, minmax(...)) 响应式卡片经典。
• gap：行列间距。
• justify-items / align-items：单元格内对齐；-content 对齐整个网格在容器内。

子项

• grid-column / grid-row：span 2 跨轨。
• grid-area：命名区域（配合 grid-template-areas 做ASCII 布局图）。