这是我参与11月更文挑战的第16天，活动详情查看：2021最后一次更文挑战
网格布局
网格布局属性display: grid或者display: inline-grid，两者的区别是后者容器外部盒子保持内联特性，因此可以和图片文字在同一行显示。而前者容器保持块状特性，宽度默认为100%，不和内联元素在一行显示。
grid-template-columns和grid-template-rows主要用来指定网格的数量和尺寸等信息。前者在网格中用到的地方比较多，因为网格布局默认布局和块布局很相似，都是从上往下依次垂直排列。
.wrapper {
grid-template-columns: 44px auto 66px;
grid-template-rows: 14% 66px auto 40px;
}
当grid-template-columns属性值有3个值时，表示网格分为3列。从左往右每列的尺寸分别44px、auto、66px;当grid-template-columns属性值为4个值时，表示网格分为4类，从上往下每行的高度分别为14%、66px、auto、40px；grid-template-columns的默认值为none，可以使用grid-auto-columns属性设定网格尺寸。而且grid-template-columns支持很多数据类型，比如长度值、百分比值、关键字属性值、<flex>数据类型、函数值(包括repeat()、minmax()、fit-content())。
min-content指的是一排或者一列格子中所有最小内容尺寸中最大的那个最小内容尺寸值而不是某一个格子的最小内容尺寸。max-content指的是最终的尺寸是最大内容宽度中最大的那个值。auto指的是尺寸的上限是最大内容尺寸的最大值，它的尺寸会受到justify-content和align-content属性影响的，而max-content的尺寸是固定的。
网格的单位fr是fraction的缩写，表示分数，用来表示自动分配列的尺寸划分的比例。auto也可以表示，但是auto的尺寸划分会随着内容变化的，内容多则尺寸大，内容少则尺寸少。而fr是按比例计算与内容多少无关。fr的计算规则是当所有fr值之和大于1，则按fr值的比例划分可自动分配尺寸。当所有fr值之和小于1，则最终的尺寸是可自动分配尺寸和fr值得乘法计算值。
.warpper {
grid-template-columns: 2fr 3fr 4fr;
}
以上案例中的fr之和为9大于1，所以按照比例2:3:4划分。
.warpper {
grid-template-columns: .3fr .3fr .3fr;
}
上面案例中虽然fr值得比例还是1:1:1，但是由于fr的值和0.9小于1，所以网格的宽度是容器尺寸和0.3的乘法计算值，会有10%的尺寸没有网格元素的。
