Grid 和 Flex 怎么分工？

Grid 管二维：行和列一起定义。Flex 管一维：在一条轴上分配、对齐。页面级的区块用 Grid，组件内部一排按钮或一个工具栏用 Flex。

原理

css

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

fr 是剩余空间的份数。minmax(0, 1fr) 允许该轨道缩小到 0。repeat(auto-fit, minmax(240px, 1fr)) 会按容器宽度决定列数，适合卡片列表。

格子可以用线号放置：grid-column: 1 / 3 跨两列。命名区域 grid-template-areas 适合不太变化的整页骨架，区域多了以后难读，就改回线号。

对齐用 justify-items、align-items 管格子里的内容，justify-content、align-content 管整个网格在容器里的位置。gap 只产生轨道间距，不会加在容器外缘。

Grid 子项默认 min-width: auto，和 flex 一样会被内容撑开。需要收缩时写成 minmax(0, 1fr)。

auto-fit 和 auto-fill 呢？

列数都随容器变化。空出来的轨道，auto-fit 会折掉并把空间分给现有列，auto-fill 会保留空轨道。卡片希望拉开时用 auto-fit。

子项能重叠吗？

可以，放到同一组网格线里，再用 z-index。重叠是显式放置的结果，不是浮动那种意外覆盖。