html5三行列表对齐,CSS Grid网格布局实例教程

1

2

3

元素就是项目。

注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的

元素就不是项目。Grid 布局只对项目生效。

行和列

容器里面的水平区域称为”行”(row)，垂直区域称为”列”(column)。

上图中，水平的深色区域就是”行”，垂直的深色区域就是”列”。

单元格

行和列的交叉区域，称为”单元格”(cell)。

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

网格线

划分网格的线，称为”网格线”(grid line)。水平网格线划分出行，垂直网格线划分出列。

正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

上图是一个 4 x 4 的网格，共有5根水平网格线和5根垂直网格线。

容器属性

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

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

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

display: grid;

display: inline-grid;

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

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。

设置项目之间的间隔

grid-row-gap: 20px; // 设置行与行的间隔

grid-column-gap: 20px; // 设置列与列的间隔

grid-gap: ; // grid-column-gap和grid-row-gap的合并简写形式，也可直径写做 gap

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

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属性的合并简写形式

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

justify-items: start | end | center | stretch;

align-items: start | end | center | stretch;

place-items: start | end | center | stretch;

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

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行。这时，浏览器会自动生成多余的网格，以便放置项目。

grid-auto-columns: 50px 50px 50px; // 超出所定义网格行的列宽

grid-auto-rows: 50px 50px 50px; // 超出所定义网格行的行高

grid-auto-flow // 容器的子元素会排列顺序: row"先行后列"、 column"先列后行"、 row dense 和 column dense

项目属性

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

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

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划分区域

justify-self: start | end | center | stretch; // 设置单元格内容的水平位置

align-self: start | end | center | stretch; // 设置单元格内容的垂直位置

place-self: ; // align-self属性和justify-self属性的合并简写形式

布局实例

两栏布局

一侧固定，一侧自适应

关键代码：

.container{

display: grid;

grid-template-columns: 100px auto; /* 或者 100px 1fr */

height: 200px;

}

效果展示：

十二网格布局

关键代码：

.container{

display: grid;

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

text-align: center;

}

效果展示：

水平垂直居中

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

关键代码：

.container{

display: grid;

place-content: center;

}

效果展示：

自适应两端对齐

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

项目宽度固定：

.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;

}

效果展示：

项目宽度不固定：

.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;

}

效果展示：

限定列宽的表格

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

.container{

display: grid;

grid-template-columns: 1fr 1fr minmax(200px, 2fr);

}

.container div{

border: 1px solid #8A2BE2;

}

效果展示：

圣杯布局

自适应移动端的圣杯布局

.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;

}

}

效果展示：

基于网格线布局

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

.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;

}

效果展示：

结束语

如果觉得文章还不错并对你有帮助的话，请分享给你的小伙伴，并点赞，点亮红心的人最美，有什么不懂得可以在底下留言哦。