Grid网格布局实例

网格布局（Grid）是最强大的 CSS 布局方案。 —— 阮一峰

立刻都 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-row-gap> <grid-column-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>; // 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>; // align-self属性和justify-self属性的合并简写形式
复制代码

布局实例

两栏布局

一侧固定，一侧自适应：地址

<style> .container{ display: grid; grid-template-columns: 100px auto; // 或者 100px 1fr } </style>
<div class="container">
  <aside></aside>
  <main></main>
</div>
复制代码

十二网格布局

地址

<style> .container{ display: grid; grid-template-columns: repeat(12, 1fr); } </style>
<div class="container">
  <div>1</div>
  ...
</div>
复制代码

水平垂直居中

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

<style> .container{ display: grid; place-content: center; } </style>
<div class="container">
  <div>asdf</div>
</div>
复制代码

自适应两端对齐

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

项目宽度固定：地址

项目宽度不固定：地址

限定列宽的表格

第三列在宽度足够（即能前两列都大于100px）的状况下是前两列之和，最小是 200px ：地址

.container {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(200px, 2fr);
}
复制代码

圣杯布局

自适应移动端的圣杯布局：地址

基于网格线布局

使用各类手段实现以下简单布局：

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

也能够使用 span 关键字：地址

使用命名的网格线布局：地址

使用命名的网格线布局2：地址

使用 repeat() 函数用来重复建立相同定义的网格：地址

使用 命名区域和隐式命名网格线：地址

总结

最近在搬砖的时候不当心砸到了脚......哦不，最近在搬砖的时候遇到了多行两端对齐尾行左对齐的布局，而后就尝试了下张鑫旭老师在 css 世界中的 text-align: justify 两端对齐方案，结果惨遭 Vue 的 v-for 生成的代码在元素与元素之间没有空格的特色而致使这种两端对齐方法无效，一怒之下就学习了 grid 网格布局，也算一件奇葩事吧~~

因为是刚学网格布局，文章未免有些简陋，请多担待。之后遇到有趣的网格布局的话，我会更新文章的。

都要 2020 了，也该用网格布局了。