从 Flex 到 Grid：什么时候该换布局模型

Flex 和 Grid 都能做出同一张页面，区别在于谁负责计算。Flex 由内容决定位置，Grid 由容器先划好格子再往里放。哪一种写起来更短，往往就是更合适的那一种。

Grid 解决的是二维排列

卡片列表需要每一行的卡片宽度一致、上下对齐。用 Flex 要固定宽度或算百分比，换行后还得处理不足一行的占位；用 Grid 只要声明列宽规则，剩下的交给 auto-fit 和 minmax。

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

从 Flex 换到 Grid 的信号

• 需要对齐行和列，而不只是排成一行
• 元素数量会变化，但仍要保持规整间距
• 页面骨架有固定侧栏和内容区，需要按区域分配空间

用 fr 和 minmax 做自适应列

fr 表示可分配空间的份数，minmax 给列宽定一个下限和上限，两者组合就能让列数随容器宽度自动变化，不需要写多个断点。

需要写多层嵌套才对齐的布局，通常是在用 Flex 做 Grid 的活。