CSS Grid 布局

什么是 Grid 布局？

CSS Grid 布局是 二维布局方式，可以同时控制 行和列的排布和对齐方式
Grid 由水平线和垂直线构成，两条水平线中间的区域叫做 行轨道，两条垂直线中间的区域叫做 列轨道

---

如何开启 Grid 布局？

要想开启 Grid 布局，只需要在 外层父盒子容器 上设置：

display:grid;
1

---

如何改变 Grid 布局？

比如说，一个容器中有 6 个子元素。需求是把它改成 3 列布局，那么这个时候我们可以使用 grid-template-columns 属性，指定每列的宽度，可以是固定宽度

grid-template-columns:100px 100px 100px;
1

我们也可以使用 fr 来设置宽度：
fr 是 grid 布局专用的单位，代表的是 grid 剩余空间，这里三列各占 三分之一

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

如果把第二列改成 2fr，那么中间这列就会占据 二分之一 的空间

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

---

如何设置 gap (行列间距) ？

我们通常要给 行和列来设置间距，那么我们可以通过 column-gap(列间距) 和 row-gap(行间距) 属性来设置

.grid {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	
	column-gap:12px;
	
	row-gap:12px;
}
1
2
3
4
5
6
7
8

注意：我们也可以通过一个属性 gap 来通过统一设置 行和列的间距

.grid {
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	
	gap:12px;
}
1
2
3
4
5
6

---

如何设置排列元素？

排列元素我们可以使用 grid-template-areas 属性。比如说我们有一个页面，它的头部和底部是宽度占满，侧边占 1 / 3，内容占 2 / 3，那么我们可以指定这样的区域：

<div class="container">
	<header>头部header>
	<aside>侧边栏aside>
	<main>内容main>
	<footer>底部footer>
div>

<style>
	.container {
		display:grid;
		
		grid-template-areas:
			"header header header"
			"sidebar content content"
			"footer footer footer";
	}
	
	header => grid-area:header
	aside => grid-area:sidebar
	main => grid-area:content
	footer => grid-area:footer
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

---

如何设置 Grid 对齐方式？

Grid 的对齐方式跟 Flexbox 布局类似，也有水平方向的行轴和垂直方向的列轴

垂直方向对齐子元素：（ align-items 属性 ）

居中对齐：align-items:center
靠下对齐：align-items:end

水平方向对齐子元素：（ justify-items 属性 ）

居中对齐：justify-items:center
靠右对齐：justify-items:end
两端对齐：justify-items:space-between

垂直方向对齐整体行列轨道：（ align-content 属性 ）

居中对齐：align-content:center
靠下对齐：align-content:end

水平方向对齐整体行列轨道：（ justify-content 属性 ）

居中对齐：justify-content:center
靠右对齐：justify-content:end
两端对齐：justify-content:space-between