图文结合-带你轻松掌握 CSS Grid布局！

grid布局是非常好用的网格布局方式！

话不多说，我们直接看实例来学习！

一.Grid 基础语法

注意，用份额 （fr）单位，子项不必设置固定的宽高，否则单位无效

.container {
  display: grid;
}

然后定义行与列：

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

这将创建一个 3 列、3行的网格结构：

• 100px：固定宽度

• 1fr：分配 1 份剩余空间

• auto：根据内容自动调整大小

添加间距：

grid-gap: 10px;

 

 

 二.属性与属性值详解

（一）容器级属性

 1.display

• grid: 创建块级网格容器

• inline-grid: 行内网格容器

定义每一列/行的尺寸：

grid-template-columns: 200px 1fr 2fr;
grid-template-rows: repeat(2, minmax(100px, auto));

• px、em、%: 固定单位

• fr: 剩余空间份额

• auto: 根据内容调整

• minmax(min, max): 限制范围

• repeat(n, value): 简化重复

🔹 不使用 repeat：

grid-template-columns: 1fr 1fr 1fr 1fr;

🔹 使用 repeat：

grid-template-columns: repeat(4, 1fr);

两个是等价的，但后者更简洁、易读，尤其在重复很多列的时候效果更明显。

 

2.grid-gap, row-gap, column-gap

设置格子之间的间距：

grid-gap: 20px;

3. grid-auto-flow：

作用：当你没有用 grid-row 或 grid-column 手动指定子项位置时，浏览器会自动把这些项目放入网格中，grid-auto-flow 就是用来控制这种自动放置的方式。

属性值	含义
row（默认）	按“行优先”方向自动排列（从左往右 → 然后换行 ↓）
column	按“列优先”方向自动排列（从上往下 ↓ 然后换列 →）
dense	启用“紧凑模式”，尽量把空格填满

示例：

.container {
  display: grid;
   grid-template-columns: repeat(6, 100px);
   grid-auto-flow: row dense;
   grid-gap: 10px; 
}

这代表项目会一行接一行排列，但如果中间有空间，就会尽量向前填补空隙（“压缩布局”）。

这里我没有设置行的高度，但他却尽量填补所有空间

 4.grid-auto-rows / grid-auto-columns 

作用： 设置自动新增行/列的大小

有时候，你只定义了网格的列数，但项目太多，网格会自动生成新行或新列来容纳它们。

这个时候，自动新增的行或列的尺寸，就由这两个属性控制：

属性名	控制内容
grid-auto-rows	自动新增的“行”高
grid-auto-columns	自动新增的“列”宽

示例

.container {
  display: grid;
  grid-template-columns: repeat(2, 100px); /* 只定义2列 */
    grid-template-rows: 200px;//只定义了一行

  grid-auto-rows: 150px;                   /* 每行150px高 */
}

 即：如果你的内容多于2行，Grid 会自动生成第 2行、第 3行……这些行的高度就全是 150px。

 （二）子项级属性

1.grid-column, grid-row：控制项目位置及跨行列

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

grid-column: 2 / 4;

• 表示：从第2列开始，到第4列前结束

• 👉 也就是跨越第2列和第3列，共跨 2 列

（⚠️ 注意：结束值是“结束前的位置”，不包含 4）

---

🔹 grid-row: 1 / 3;

• 表示：从第1行开始，到第3行前结束

• 👉 也就是跨越第1行和第2行，共跨 2 行

 

 注意：想要实现这种效果，最好给合并的格子单独加一个类名，比如，我单独加了kk这个类名，不然会导致所有的都合并

简写方式：

2.grid-area: row-start / column-start / row-end / column-end;

grid-area: 1 / 2 / 3 / 4; /* 行1列2 到 行3列4 */

这是一种定位用法，相当于以下四个属性的合并简写：

grid-row-start: 1;
grid-column-start: 2;
grid-row-end: 3;
grid-column-end: 4;

3.justify-self / align-self：用来控制（某个格子里的内容）在自己所在单元格里的对齐方式。

🔹 justify-self: 控制水平方向（横向）在格子里的位置

🔹 align-self: 控制垂直方向（纵向）在格子里的位置

 

三.对齐属性（容器整体）

justify-items / align-items:控制所有子项的对齐方式

justify-items: start;
align-items: center;

justify-content / align-content:控制整个网格内容块在容器中的对齐方式：

justify-content: space-between;
align-content: center;

是不是有点懵，分不清楚两者的区别？是的，这两组属性虽然看起来很像，但作用对象和控制范围完全不同

属性名	控制对象	控制方向	作用范围
justify-items	所有子项	水平方向	控制每个格子内部的内容如何对齐
align-items	所有子项	垂直方向	控制每个格子内部的内容如何对齐
justify-content	网格整体	水平方向	控制整个网格区域在容器中如何对齐
align-content	网格整体	垂直方向	控制整个网格区域在容器中如何对齐

 它们啥时候生效？？

通常这里子项会设置固定宽度或高度，不然子项宽高==单元格宽高，使这两个属性无法生效

属性名	控制对象	何时生效
justify-items	所有子项	子项宽度 < 单元格宽度
align-items	所有子项	子项高度 < 单元格高度
justify-content	网格整体	网格宽度 < 容器宽度，且列数 > 1
align-content	网格整体	网格高度 < 容器高度，且行数 > 1

 是不是有点不理解子项宽高与单元格宽高？

1.什么是“单元格”？

grid-template-columns: 100px 1fr 1fr;
grid-template-rows: 100px 200px;

你就创建了一个 3列 × 2行 的网格，总共 6个单元格（cells）。

而子项，就是你自己放在 Grid 容器（使用 display: grid 的元素）内部的直接子元素，也叫 Grid Items。通常情况下，使用fr等可以自适应的单位，单元格==子项

小编不易，点个赞吧！！！！！！！！