CSS Grid 布局怎么写？等分列、响应式卡片和侧栏布局指南

CSS Grid 是现代网页布局里非常实用的一套能力。它不只是“几列几行”，还可以处理响应式卡片、固定侧栏、自适应内容区、等高模块和复杂的页面区域。

如果你想快速试不同参数，可以打开 CSS Grid 布局生成器，选择等分列、响应式卡片或侧栏布局，调整间距和宽度后复制 CSS。工具在浏览器本地运行，不上传任何内容。

什么时候用 CSS Grid

当你需要同时控制行和列时，Grid 往往比 Flex 更清晰。比如工具箱卡片、商品列表、后台数据面板、文章详情页、文档目录加正文、图片墙和定价表，都适合用 Grid。

Flex 更适合一维布局，例如按钮组、导航栏、输入框和图标文字对齐。Grid 更适合二维布局：你关心的不只是横向排列，还关心换行、列宽、行高、区域关系和整体网格。

等分列布局

最常见的写法是固定列数：

.grid-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

minmax(0, 1fr) 比单纯的 1fr 更稳，因为它能避免长文本或大图把列撑破。在后台表格、卡片标题、URL、邮箱地址这类内容里，这个细节很有用。

响应式卡片布局

卡片列表更推荐使用 auto-fit 和 minmax：

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

这段代码的意思是：每个卡片最小 240px，容器空间足够时自动多排几列，空间不足时自动换行。它很适合工具页、文章列表、产品列表和作品集页面。

如果最小宽度太大，移动端会容易横向溢出；如果太小，桌面端卡片会显得碎。中文内容较多的卡片，常见最小宽度可以从 220px 到 280px 之间试。

侧栏布局

文档、博客详情和设置页经常需要固定侧栏：

.page-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 32px;
}

侧栏放目录、筛选、摘要或用户信息，主区域负责正文。主区域继续使用 minmax(0, 1fr)，可以减少代码块、表格、长链接撑开页面的风险。

移动端通常不建议保留固定侧栏，可以在媒体查询里改成一列：

@media (max-width: 768px) {
  .page-layout {
    grid-template-columns: 1fr;
  }
}

gap、align-items 和 justify-items

gap 控制网格项目之间的距离，比给每个项目写 margin 更干净。你也可以拆成 row-gap 和 column-gap，分别控制行间距和列间距。

align-items 控制项目在单元格里的纵向对齐，justify-items 控制横向对齐。普通卡片通常用默认的 stretch，如果做图标、徽章或小尺寸组件，可以尝试 center。

总结

CSS Grid 的关键不是记住所有属性，而是根据场景选对模式：固定列数适合稳定的桌面布局，auto-fit + minmax 适合响应式卡片，固定侧栏适合文档和详情页。

需要快速生成代码时，可以用 CSS Grid 布局生成器 先把布局调出来，再复制 CSS 或 Tailwind 任意值类名。