css grid网格布局基础详解与使用方法-css教程-PHP中文网

css grid网格布局基础详解与使用方法

P粉602998670

发布： 2025-09-24 11:34:01

原创

796人浏览过

Grid布局通过display: grid创建容器，使用grid-template-columns/rows定义行列，gap设置间距，可借助网格线或grid-area进行元素定位，repeat()和minmax()实现响应式自动填充，grid-template-areas提升布局可读性，并通过align-items、justify-items等控制对齐，适合复杂二维页面结构。

css grid网格布局基础详解与使用方法

Grid网格布局是CSS中最强大的布局系统之一，它能轻松实现二维布局（行和列），非常适合构建复杂的网页结构。相比Flexbox的一维布局，Grid更适合整体页面的划分。

1. 创建一个基本Grid容器

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

示例：

.container {
display: grid;
}

此时子元素会自动成为网格项，并按默认方式排列（单列多行）。

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

2. 定义行与列

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

常用单位：

px：固定尺寸
fr：弹性比例单位（如1fr 2fr表示两列，比例为1:2）
%：百分比
auto：自适应内容大小

例子：

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

这会创建两列（第一列占1份，第二列占2份）、两行（高度分别为100px和50px）。

3. 设置间距

用gap属性设置网格项之间的间距（替代旧的grid-gap）。

.container {
  gap: 10px;
  /* 可分别设置 */
  row-gap: 10px;
  column-gap: 20px;
}

推荐使用gap统一控制，简洁清晰。

4. 网格线与元素定位

Grid通过“网格线”编号来定位元素。可以手动指定某个项目从哪条线开始到哪条线结束。

关键属性：

网易天音

网易出品！一站式音乐创作工具！零基础写歌！

查看详情

grid-column-start / grid-column-end
grid-row-start / grid-row-end
简写：grid-column: 1 / 3; 表示从第1条线跨到第3条线（占两列）

例子：

.item {
grid-column: 1 / 3;
grid-row: 1 / 2;
}

该元素将横跨前两列，占据第一行。

5. 使用repeat()函数简化代码

当有多组重复的行列时，可用repeat()函数。

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

等价于1fr 1fr 1fr，创建三等分列。

还可结合其他值：repeat(2, 100px 1fr) 生成“100px+1fr”重复两次。

6. 自动填充与最小最大值（minmax）

使用repeat(auto-fill, ...)或auto-fit让网格自动适应容器宽度。

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

含义：尽可能多地放入最小100px、最大1fr的列，自动换行。适合响应式卡片布局。

7. 网格模板区域（grid-template-areas）

通过命名区域直观设计布局，提升可读性。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 100px 1fr 50px;
  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; }

这种方式让布局结构一目了然，适合复杂页面如后台管理界面。