css grid布局基础使用方法

CSS Grid 布局通过定义容器、行列、间距和项目定位实现二维布局。1. 设置 display: grid 启用布局；2. 用 grid-template-columns/rows 定义列宽行高，支持 fr 单位；3. 使用 gap 控制间距；4. 通过 grid-column/row 或 span 指定项目位置；5. grid-area 简写四边界；6. grid-template-areas 创建命名区域直观布局；7. repeat() 结合 auto-fit/minmax() 实现响应式网格。掌握这些可高效构建复杂页面结构。

CSS Grid 布局是一种二维布局系统，适合将页面划分为多个行和列组成的网格结构。它非常适合构建复杂的网页布局，比如仪表盘、卡片列表或响应式页面。以下是 Grid 布局的基础使用方法。

1. 定义网格容器

要启用 Grid 布局，先在父元素上设置 display: grid 或 display: inline-grid：

.container {
  display: grid;
}

这个容器内的所有直接子元素会自动成为网格项（grid items）。

2. 设置行和列

使用 grid-template-columns 和 grid-template-rows 来定义网格的列宽和行高。

立即学习“前端免费学习笔记（深入）”；

.container {
  display: grid;
  grid-template-columns: 100px 200px 1fr;
  grid-template-rows: 50px 100px;
}

上面代码表示：三列，宽度分别为 100px、200px 和剩余空间；两行，高度为 50px 和 100px。
fr 单位表示“可用空间的一部分”，1fr 就是一份。

3. 网格间距

使用 gap 属性设置网格项之间的间距（推荐方式）：

.container {
  gap: 10px; /* 行和列的间距 */
  /* 或分开写 */
  row-gap: 10px;
  column-gap: 20px;
}

4. 网格线与项目定位

每个网格线都有编号，从 1 开始。可以使用 grid-column 和 grid-row 控制项目跨越的位置。

.item {
  grid-column: 1 / 3; /* 从第1条线开始，跨到第3条线（占两列） */
  grid-row: 1 / 2;    /* 占第一行 */
}

也可以用 span 表示跨越数量：

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

31

查看详情

.item {
  grid-column: 2 / span 2; /* 从第2列开始，跨越2列 */
}

5. 简写属性 grid-area

grid-area 可以一次性定义项目的四个边界：

.item {
  grid-area: 1 / 2 / 3 / 4;
  /* 意思是：row-start / col-start / row-end / col-end */
}

6. 使用命名区域布局

可以用 grid-template-areas 创建可视化布局结构：

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-rows: 60px 1fr 50px;
  grid-template-columns: 200px 1fr;
}
<p>.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }</p>

这种方式更直观，适合整体页面结构设计。

7. 自动填充与重复

使用 repeat() 函数简化重复的列或行定义：

.container {
  grid-template-columns: repeat(3, 1fr); /* 三列，每列等宽 */
  /* 等价于 1fr 1fr 1fr */
}

结合 auto-fit 或 auto-fill 实现响应式网格：

.container {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

这会让容器根据可用空间自动排列最小 150px 的列，并填满空间。

基本上就这些。掌握这些基础后，Grid 能帮你快速搭建灵活、响应式的布局结构。不复杂但容易忽略细节，多试几次就能熟练。

以上就是css grid布局基础使用方法的详细内容，更多请关注php中文网其它相关文章！