CSS Grid 是前端开发中最强大的二维布局系统，但手写 grid-template-columns、grid-template-rows 和 gap 往往需要反复试错。CSS Grid 生成器让你用可视化方式配置布局，直接复制生成的 CSS，省去猜测的环节。

立即使用 CSS Grid 生成器 →

CSS Grid 的核心概念

CSS Grid 将容器变成一个二维坐标系，同时控制行和列。与 Flexbox（沿单轴排列）不同，Grid 让你精确定义每条轨道的尺寸和位置。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

这段代码创建了一个三等分列的网格，列间距为 1.5rem。1fr 表示”等分剩余空间”。

最常用的 Grid 属性

grid-template-columns / grid-template-rows

定义网格的轨道结构，支持多种写法：

写法CSS效果
等宽列repeat(3, 1fr)三列等宽
固定+弹性240px 1fr侧边栏 + 主内容
自动填充repeat(auto-fill, minmax(200px, 1fr))响应式卡片网格
混合单位200px 1fr 2fr固定列 + 比例列

gap

控制行列间距，可以分别设置：

gap: 1rem;           /* 行列间距相同 */
gap: 1rem 2rem;      /* 行间距 列间距 */
row-gap: 1rem;
column-gap: 2rem;

grid-column / grid-row

精确放置元素：

.hero {
  grid-column: 1 / -1;  /* 横跨全部列，-1 表示最后一条线 */
  grid-row: 1 / 3;      /* 跨越 2 行 */
}

grid-template-areas

具名区域让复杂布局一目了然：

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

实用布局模板

响应式卡片网格（无需媒体查询）

这是使用最广泛的 Grid 模式，卡片自动换行，无需一行媒体查询：

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

auto-fill 会尽可能多地创建列，minmax(280px, 1fr) 确保每张卡片至少 280px 宽。容器变窄时自动减少列数。

经典三栏布局

.page {
  display: grid;
  grid-template-columns: 200px 1fr 160px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header  header"
    "nav     main    aside"
    "footer  footer  footer";
  min-height: 100vh;
}

后台仪表盘网格

.dashboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.widget-full    { grid-column: span 12; }
.widget-half    { grid-column: span 6; }
.widget-third   { grid-column: span 4; }
.widget-quarter { grid-column: span 3; }

12 列网格是后台系统的标准做法，各组件通过 span 灵活占位。

响应式适配方案

媒体查询方案

.grid {
  display: grid;
  grid-template-columns: 1fr;   /* 移动端单列 */
  gap: 1rem;
}

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

minmax 方案（推荐）

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 1rem;
}

min(100%, 280px) 可以防止窄屏幕上出现横向溢出——这是 minmax 的常见坑。

具名区域 + 媒体查询

.layout {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 1fr 300px;
    grid-template-areas:
      "header  header"
      "main    sidebar"
      "footer  footer";
  }
}

Grid vs Flexbox 怎么选

两者都是现代布局工具，分工明确：

  • Grid：二维布局。需要同时控制行和列时用 Grid。适合页面框架、仪表盘、卡片瀑布流、表单排版。
  • Flexbox：一维布局。沿单轴排列时用 Flex。适合导航栏、按钮组、单元素居中。

两者可以嵌套组合：Grid 容器内的子元素可以是 Flex 容器，反之亦然。

浏览器调试工具

Chrome、Firefox 和 Edge 都内置了 Grid 检查器。在 DevTools 的 Elements 面板中，点击 grid 容器旁的 grid 标记，浏览器会在页面上直接叠加显示网格线、列/行编号和间距。

Firefox 的 Grid 检查器功能最全，支持具名区域高亮和多个网格同时显示。

用 CSS Grid 生成器提升效率

手动调整 grid-template-columns、行数和间距往往需要多次刷新才能看到效果。CSS Grid 生成器 提供可视化操作界面：

  • 直观设置列数和行数
  • 拖拽调整轨道宽度
  • 自由切换 fr、px、%、auto 单位
  • 一键复制完整 CSS，直接粘贴使用

立即体验 CSS Grid 生成器 →