1.第一个 Grid 布局
CSS Grid 布局由两个核心组成部分是: wrapper（父元素）和 items（子元素）。
下面是一个 wrapper 元素，内部包含6个 items ：
HTML部分1
2
3
4
5
6
7
8<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
要把 wrapper 元素变成一个 grid(网格)，只要简单地把其 display 属性设置为 grid 即可：1
2
3.wrapper {
display: grid;
}
仅仅是这样并没有什么用处结果如图所示：
2.Columns(列) 和 rows(行)
为了使其成为二维的网格容器，我们需要定义列和行。让我们创建3列和2行。我们将使用 grid-template-row 和 grid-template-column 属性。
1 | .wrapper { |
记住几条线是接下来需要用的
这些值决定了我们希望我们的列有多宽（ 100px ），以及我们希望行数是多高（ 50px ）
如果这样设置1
2
3
4
5.wrapper {
display: grid;
grid-template-columns: 200px 50px 100px;
grid-template-rows: 100px 30px;
}
结果就是这样
注意这里评分宽度尽量用（可以自适应）
grid-template-columns: repeat(6, 1fr);
页面宽度平均分成6份，每个占一份
3.放置 items(子元素)
3.1行
要定位和调整 items(子元素) 大小，我们将使用 grid-column 和 grid-row 属性来设置：1
2
3
4.item1 {
grid-column-start: 1;
grid-column-end: 4;
}
当然也可以这么写1
2
3.item1 {
grid-column: 1 / 4;
}
item1 占据从第一条网格线开始，到第四条网格线结束换句话说，它将独立占据整行.
结果如图所示：
这是怎么回事呢？为啥是1,4呢，原因如图
3.2列
同理。列也就不用多说了，直接看代码1
2
3
4
5
6
7
8
9
10
11
12.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
.item3 {
grid-row-start: 2;
grid-row-end: 4;
}
.item4 {
grid-column-start: 2;
grid-column-end: 4;
}
结果如下：
基本布局这些就够了
4.矩阵布局——grid-template-areas
直接代码讲解吧1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21.item-1 {
grid-area: header;
}
.item-2 {
grid-area: main;
}
.item-3 {
grid-area: sidebar;
}
.item-4 {
grid-area: footer;
}
.wrapper {
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
把每个div起一个别名：
.item-a {
grid-area: header;
}
开始布局
grid-template-areas:
“header header header header”
“main main . sidebar”
“footer footer footer footer”;
其中.代表空占位
结果如图所示：
5指定网格线(grid lines)的大小
属性这么设置1
2
3
4.wrapper {
grid-column-gap: <line-size>;
grid-row-gap: <line-size>;
}
具体事例1
2
3
4
5
6.container {
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
grid-column-gap: 10px;
grid-row-gap: 15px;
}
6 每个网格中的格式
6.1整体设置 -justify-items
1 | .container { |
start：将内容对齐到网格区域(grid area)的顶部
end：将内容对齐到网格区域的底部
center：将内容对齐到网格区域的中间（垂直居中）
stretch：填满网格区域高度（默认值）
示例：1
2
3.container {
align-items: start;
}
示例：1
2
3.container {
align-items: end;
}
示例：1
2
3.container {
align-items: center;
}
示例：1
2
3.container {
align-items: stretch;
}
6.2单个设置 -justify-self
规则和上面一样，这里就不多说了
示例：1
2
3.item-a {
justify-self: start;
}
示例：1
2
3.item-a {
justify-self: end;
}
示例：1
2
3.item-a {
justify-self: center;
}
示例：1
2
3.item-a {
justify-self: stretch;
}
7.非自适应布局对齐方式
7.1沿—X轴线
有时，你的网格合计大小可能小于其 网格容器(grid container) 大小。 如果你的所有 网格项(grid items) 都使用像px这样的非灵活单位设置大小，在这种情况下，您可以设置网格容器内的网格的对齐方式
start：将网格对齐到 网格容器(grid container) 的左边
end：将网格对齐到 网格容器 的右边
center：将网格对齐到 网格容器 的中间（水平居中）
stretch：调整 网格项(grid items) 的宽度，允许该网格填充满整个 网格容器 的宽度
space-around：在每个网格项之间放置一个均匀的空间，左右两端放置一半的空间
space-between：在每个网格项之间放置一个均匀的空间，左右两端没有空间
space-evenly：在每个栅格项目之间放置一个均匀的空间，左右两端放置一个均匀的空间
示例：1
2
3.container {
justify-content: start;
}
1
2
3.container {
justify-content: end;
}
1
2
3.container {
justify-content: center;
}
1
2
3.container {
justify-content: stretch;
}
1
2
3.container {
justify-content: space-around;
}
1
2
3.container {
justify-content: space-between;
}
1
2
3.container {
justify-content: space-evenly;
}
7.2沿—Y轴线
和x轴基本一样
示例：1
2
3.container {
align-content: start;
}
1
2
3.container {
align-content: end;
}
1
2
3.container {
align-content: center;
}
1
2
3.container {
align-content: stretch;
}
1
2
3.container {
align-content: space-around;
}
1
2
3.container {
align-content: space-between;
}
1
2
3.container {
align-content: space-evenly;
}
总结
常用的基本就这些了如果需要了解更多，这儿啦
最后更新： 2018年11月10日 16:58
