CSS Grid 的常用布局策略

先定义内容，再定义轨道

对于产品目录、内容画廊和仪表板，推荐先确定每个模块需要的最小可读宽度，然后再决定列数。固定三列在窄屏上可能拥挤，因此通常应搭配响应式规则。

常用写法

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

避免内容撑破布局

当列里出现长网址、代码和超长标题时，使用 minmax(0, 1fr) 或给子项设定 min-width: 0，通常能避免水平溢出。

何时使用 Flexbox

一维的导航行、按钮组、标签流通常使用 Flexbox 更简单；需要控制多个行列的矩阵布局时，Grid 更合适。它们可以在同一页面内配合使用。