TommyHu.meAppearance
display 属性
display：grid
display：inline-grid
grid-template-columns 属性和 grid-template-rows 属性
.wrapper {
display: grid;
/* 声明了三列，宽度分别为 200px 100px 200px */
grid-template-columns: 200px 100px 200px;
grid-gap: 5px;
/* 声明了两行，行高分别为 50px 50px */
grid-template-rows: 50px 50px;
}
repeat() 函数
可以简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。比如上面行高都是一样的，我们可以这么去实现，实际效果是一模一样的
grid-template-rows: 50px 50px;
/* 也可以这么写 */
grid-template-rows: repeat(2, 50px);
auto-fill 关键字
表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。
grid-template-columns: repeat(auto-fill, 200px)表示列宽是 200 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素，代码以及效果如下图所示：
.wrapper-2 {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
grid-gap: 5px;
grid-auto-rows: 50px;
}
fr 关键字
Grid布局还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。fr单位代表网格容器中可用空间的一等份。grid-template-columns: 200px 1fr 2fr表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。代码以及效果如下图所示：
.wrapper-3 {
display: grid;
grid-template-columns: 200px 1fr 2fr;
grid-gap: 5px;
grid-auto-rows: 50px;
}
minmax() 函数
我们有时候想给网格元素一个最小和最大的尺寸，
minmax()函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数，分别为最小值和最大值。grid-template-columns: 1fr 1fr minmax(300px, 2fr)的意思是，第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍。代码以及效果如下：
.wrapper-4 {
display: grid;
grid-template-columns: 1fr 1fr minmax(300px, 2fr);
grid-gap: 5px;
grid-auto-rows: 50px;
}
auto 关键字
由浏览器决定长度。通过
auto关键字，我们可以轻易实现三列或者两列布局。grid-template-columns: 100px auto 100px表示第一第三列为 100px，中间由浏览器决定长度，代码以及效果如下
.wrapper-5 {
display: grid;
grid-template-columns: 100px auto 100px;
grid-gap: 5px;
grid-auto-rows: 50px;
}
grid-row-gap 属性、grid-column-gap 属性以及 grid-gap 属性
grid-row-gap属性、grid-column-gap属性分别设置行间距和列间距。grid-gap属性是两者的简写形式。
grid-row-gap: 10px表示行间距是 10px，grid-column-gap: 20px表示列间距是 20px。grid-gap: 10px 20px实现的效果是一样的
.wrapper {
display: grid;
grid-template-columns: 200px 100px 100px;
grid-gap: 10px 20px;
grid-auto-rows: 50px;
}
.wrapper-1 {
display: grid;
grid-template-columns: 200px 100px 100px;
grid-auto-rows: 50px;
grid-row-gap: 10px;
grid-column-gap: 20px;
}
grid-template-areas 属性
你可以使用 grid-area 属性来命名网格元素。
命名的网格元素可以通过容器的 grid-template-areas 属性来引用。
以下实例 item1 命名为 "myArea", 并跨越五列：
.item1 {
grid-area: myArea;
}
.grid-container {
display: grid;
grid-template-areas: 'myArea myArea myArea myArea myArea';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
grid-auto-flow 属性
grid-auto-flow属性控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图英文数字的顺序one,two,three...。这个顺序由grid-auto-flow属性决定，默认值是row。
.wrapper {
display: grid;
grid-template-columns: 100px 200px 100px;
grid-auto-flow: row;
grid-gap: 5px;
grid-auto-rows: 50px;
}