Grid网格布局实例

马上都 2020 年了，你还没有使用网格布局吗？虽然这些年 js 发展的势头正劲，盖过了 css 的发展风头，但是 css 也是有很大进步的。弹性布局、网格布局相继被各大主流浏览器支持，大大方便了我们切图仔，再也不需要用 bootstrap 的栅格系统了，网格布局原生支持！SO EASY ~
本文重在介绍网格布局的应用实例，所以简介部分只是做了一些属性的简单整理介绍（主要方便自己查询使用），详细介绍建议参考阮一峰 CSS Grid 网格布局教程。若要看实例请直接点击这里。
简介
Grid 布局将容器划分成"行"和"列"，产生单元格也就是项目所在。
容器
容器就是设置了 display: grid; 或者 display: inline-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属性的合并简写形式
复制代码
布局实例
两栏布局
一侧固定，一侧自适应：地址

复制代码十二网格布局 地址

1

...

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

asdf

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

项目宽度不固定：地址

限定列宽的表格
第三列正常是前两列之和，最小是 200px ：地址

.container {
display: grid;
grid-template-columns: 1fr 1fr minmax(200px, 2fr);
}
复制代码圣杯布局
自适应移动端的圣杯布局：地址

基于网格线布局
使用各种手段实现如下简单布局：

基于网格线数字编号安放项目：地址

也可以使用 span 关键字：地址
使用命名的网格线布局：地址
使用命名的网格线布局2：地址
使用 repeat() 函数用来重复创建相同定义的网格：地址
http://weavi.com/17046620
http://weavi.com/17046615
http://weavi.com/17046600
使用 命名区域和隐式命名网格线：地址
总结
最近在搬砖的时候不小心砸到了脚…哦不，最近在搬砖的时候遇到了多行两端对齐尾行左对齐的布局，然后就尝试了下张鑫旭老师在 css 世界中的 text-align: justify 两端对齐方案，结果惨遭 Vue 的 v-for 生成的代码在元素与元素之间没有空格的特点而导致这种两端对齐方法无效，一怒之下就学习了 grid 网格布局，也算一件奇葩事吧~~
由于是刚学网格布局，文章未免有些简陋，请多担待。以后遇到有趣的网格布局的话，我会更新文章的。