CSS Grid网格布局实例教程 - GXUZF.COM - 林澈思的茶

CSS Grid网格布局实例教程

分类：折腾 ; 热度：2339 ; 最后更新于2020 年 02 月 14 日

赵帆同学赵帆同学

针对于Web布局而言，个人认为Grid布局将是Web布局的神器，它改变了以往任何一种布局方式或者方法。虽然这些年 js 发展的势头正劲，盖过了 css 的发展风头，但是 css 也是有很大进步的。弹性布局、网格布局相继被各大主流浏览器支持，大大方便了我们切图仔，再也不需要用 bootstrap 的栅格系统了，网格布局原生支持！不管以前的采用什么布局方法都可以说是一维的布局方式，而Grid最大的特色，是一个基于网格的二维布局系统，目的是用来优化用户界面设计。可以说网格布局（Grid）是最强大的 CSS 布局方案。

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

基本概念

学习 Grid 布局之前，需要了解一些基本概念。

容器和项目

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

例子：

1
2
3
4
5
<div>
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>

上面代码中，最外层的<div>元素就是容器，内层的三个<div>元素就是项目。

注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的<p>元素就不是项目。Grid 布局只对项目生效。

行和列

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。
CSS Grid网格布局实例教程
上图中，水平的深色区域就是"行"，垂直的深色区域就是"列"。

单元格

行和列的交叉区域，称为"单元格"（cell）。

正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

网格线

划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。

正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。
CSS Grid网格布局实例教程
上图是一个 4 x 4 的网格，共有5根水平网格线和5根垂直网格线。

容器属性

Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。

容器属性必须设置在容器上。

设置容器为行性质或内联性质的网格布局：

1
2
display: grid;
display: inline-grid;

设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

1
2
3
4
5
6
7
grid-template-columns: 100px 100px 100px; // 将容器设为三列，每列的列宽为100px
grid-template-rows: 100px 100px 100px; // 将容器设为三行，每列的行高为100px
grid-template-areas: 'a a a'
'b b b'
'c c c'; // 定义区域名，由单个或多个单元格组成
grid-template // 上面三个属性的合并简写形式，不易读易写，不建议使用
grid // 多属性合并，不易读易写，不建议使用
注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。
比如，区域名为header，则起始位置的水平网格线和垂直网格线叫做header-start，终止位置的水平网格线和垂直网格线叫做header-end。

设置项目之间的间隔

1
2
3
grid-row-gap: 20px; // 设置行与行的间隔
grid-column-gap: 20px; // 设置列与列的间隔
grid-gap: <grid-row-gap> <grid-column-gap>; // grid-column-gap和grid-row-gap的合并简写形式，也可直径写做 gap

整个内容区域在容器里面的水平/垂直位置

1
2
3
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
place-content: <align-content> <justify-content>; // align-content属性和justify-content属性的合并简写形式

项目内容在单元格中的水平/垂直位置

1
2
3
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items: start | end | center | stretch;

repeat() / minmax()函数 和 auto-fill/auto/fr关键字

1
2
3
4
5
6
7
grid-template-columns: repeat(3, 100px); // 3列， 每列100px
grid-template-columns: repeat(auto-fill, 100px); // 自适应列数， 每列100px
grid-template-columns: repeat(3, 1fr); // 3列，每列等宽
grid-template-columns: 100px 1fr 2fr; // 第一列100px，剩余空间 1 : 2 分配给第二第三列
grid-template-columns: 100px auto; // 第一列100px，第二列自适应剩余空间
grid-template-columns: 1fr 1fr minmax(200px, 2fr); // 前两列 1 等宽 ，最后一列最小 200px ，正常情况下是前一列的 2 倍
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; // [c1] 为网格线名

有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。

1
2
3
grid-auto-columns: 50px 50px 50px; // 超出所定义网格行的列宽
grid-auto-rows: 50px 50px 50px; // 超出所定义网格行的行高
grid-auto-flow // 容器的子元素会排列顺序: row"先行后列"、 column"先列后行"、 row dense 和 column dense

项目属性

项目属性必须设置在项目上。

项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。

1
2
3
4
5
6
7
grid-column-start: 1; // 左边框所在的垂直网格线
grid-column-end: 2; // 右边框所在的垂直网格线
grid-row-start: 1; // 上边框所在的水平网格线
grid-row-end: 2; // 下边框所在的水平网格线
grid-column: 1 / 2; // grid-column-start和grid-column-end的合并简写形式 也可以结合网格线和span关键字
grid-row:1 / 2; // grid-row-start属性和grid-row-end的合并简写形式 也可以结合网格线和span关键字
grid-area: a // 指定项目放在哪一个区域  由容器上的grid-template-area划分区域
1
2
3
justify-self: start | end | center | stretch; // 设置单元格内容的水平位置
align-self: start | end | center | stretch; // 设置单元格内容的垂直位置
place-self: <align-self> <justify-self>; // align-self属性和justify-self属性的合并简写形式

布局实例

两栏布局

一侧固定，一侧自适应

关键代码：

1
2
3
4
5
6
7
8
9
10
11
<style>
.container{
display: grid;
grid-template-columns: 100px auto; /* 或者 100px 1fr */
height: 200px;
}
</style>
<div class="container">
<aside></aside>
<main></main>
</div>

效果展示：
两栏布局

十二网格布局

关键代码：

1
2
3
4
5
6
7
8
9
10
11
<style>
.container{
display: grid;
grid-template-columns: repeat(12, 1fr);
text-align: center;
}
</style>
<div class="container">
<div>1</div>
. . .
</div>

效果展示：
十二网格布局

水平垂直居中

目前 grid 布局是唯一一个一行 css 代码实现水平垂直居中布局的方法

关键代码：

1
2
3
4
5
6
7
8
9
<style>
.container{
display: grid;
place-content: center;
}
</style>
<div class="container">
<div>码云笔记 mybj123.com</div>
</div>

效果展示：
水平垂直居中

自适应两端对齐

这种效果难在实现最后一行左对齐的效果。如果使用 flex 布局或者 text-align: justify （参考此处）方法，则需要使用等列的空标签占位，而如果不确定总共有多少列的话则难以实现最后一行左对齐的效果。而 grid 布局则可完美实现两端对齐最后一行左对齐的效果。

项目宽度固定：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
.container{
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
justify-content: space-between;
gap: 30px;
}
.item{
width: 100px;
height: 100px;
font-size: 4em;
text-align: center;
border: 1px solid blueviolet;
}
</style>
<div class="container">
<div class="item">1</div>
. . .
</div>

效果展示：
自适应两端对齐
项目宽度不固定：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.container{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px,1fr));
grid-auto-rows: minmax(100px,auto);
gap: 30px;
}
.item{
border: 1px solid #8A2BE2;}
</style>
<div class="container">
<div class="item">1</div>
. . .
</div>

效果展示：
项目宽度不固定

限定列宽的表格

第三列正常是前两列之和，最小是 200px ：

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.container{
display: grid;
grid-template-columns: 1fr 1fr minmax(200px, 2fr);
}
.container div{
border: 1px solid #8A2BE2;}
</style>
<div class="container">
<div>1</div>
. . .
</div>

效果展示：
限定列宽的表格

圣杯布局

自适应移动端的圣杯布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<style>
.container{
display: grid;
grid-template-columns: 150px auto 150px;
grid-gap: 1em;
}
header,footer{
grid-column: 1 / 4;
}
header,aside,article,footer{
background: #eaeaea;    display: grid;
place-content: center;
height: 17vh;
}
@media all and (max-width: 700px;) {
aside,article{
grid-column: 1 / 4;
}
}
</style>
<div class="container">
<header>Header</header>
<aside>Left Sidebar</aside>
<article>Article</article>
<aside>Rite Sidebar</aside>
<footer>Footer</footer>
</div>

效果展示：
圣杯布局

基于网格线布局

基于网格线数字编号安放项目，推荐阅读我之前写过的一篇文章《3种方案实现跨行或跨列布局》

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<style>
.container{
display: grid;
grid-template-columns: 100px 100px 100px;
grid-gap: 10px;
}
.box{
padding: 20px;
border-radius: 5px;
background: brown;
color: #fff;    font-size: 150%;
}
.a{
grid-column: 1 / 3;
grid-row: 1;
}
.b{
grid-column:  3;
grid-row: 1 / 3;
}
.c{
grid-column: 1;
grid-row: 2;
}
.d{
grid-column: 2;
grid-row: 2;
}
</style>
<div class="container">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
</div>

效果展示：
基于网格线布局

评论卡