grid布局

grid布局

display: grid 指定一个容器采用网格布局。
display: inline-grid; 将纵向排列变为横向排列。
注意：设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
grid-template-columns 属性：定义每一列的列宽
grid-template-rows 属性：定义每一行的行高

display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px ;

repeat()
简化重复的值

display: grid;
grid-template-columns:repeat(3,100px);
grid-template-rows:  repeat(3,100px);

另一种写法：
grid-template-columns:repeat(2,100px 50px); 相当于：grid-template-columns:repeat(100px 50px，100px 50px);

auto-fill关键字
用于：单元格的大小固定，容器大小不固定。使用auto-fill可使每一行容纳更多的单元格，自动填充。

grid-template-columns:repeat(auto-fill,100px);  

fr关键字
如果两列的宽度分别是1fr和2fr，表示后者是前者的两倍。
fr可以与绝对长度的单位结合使用
fr是一个相对尺寸单位，表示剩余空间做等分，此项分配到的百分比(如果只有一个项使用此单位，那就占剩余空间的100%，所以多个项联合使用更有意义)

 grid-template-columns: 150px 1fr 2fr;

效果：从左往右每列：150px 116px 233px

minmax()
此函数产生一个长度范围，表示长度就在这个范围之中。接受两个参数，分别是最小值和最大值。

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

列宽不小于100px，不大于1fr
auto关键字
表示由浏览器自己决定长度

 grid-template-columns:100px auto 100px;

第二列宽度等于单元格的最大宽度
网格线的名称

 grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];

[c1]和[r1]表示每列或每行网格线

网格线布局允许同一根线有多个名字：[fifth-line row-5]
以下均可省略gridgrid-row-gap:20px; 设置行间距grid-column-gap:20px; 设置列间距
grid-gap属性是 grid-row-gap和grid-column-gap的合并简写形式
grid-gap: ;
等同于：
grid-gap:20px 20px
若grid-gap省略了第二个值，浏览器默认第二个值等于第一个值。截至
grid-template-areas属性
定义区域，一个区域由单个或多个单元格组成。
划分九个单元格，定名a到i，分别对应九个单元格。

grid-template-areas: 'a b c'
                            'd e f'
                            'g h i';

单元格合并（将九个单元格分成a,b,c三个区域）

grid-template-areas: 'a a a'
                            'b b b'
                             c c c';

布局实例：

grid-template-areas: "header header header"
                     "main main sidebar"
                     "footer footer footer";

顶部是页眉区域，底部是页脚区域，中间部分是main和sidebar
某些区域不需要，使用点（.）表示

grid-template-areas:
'a . c'
'd . f'
'g . i';

注：起始网格线自动命名:区域名-start
终止网格线：区域名-end
grid-auto-flow属性
决定网格“先行后列”还是“先列后行”
值：1.(默认） row:先行后列
2. column:先列后行
3.row dense:先行后列，尽可能紧密填满，不出现空格
4.column dense：先列后行，尽量填满空格
place-items属性是align-items属性和justify-items属性的合并简写形式。justify-items属性：单元格内容水平位置（左中右）align-items属性：单元格内容垂直位置（上中下）取值：

1. start：对齐单元格的起始边缘。
2. end：对齐单元格的结束边缘。
3. center：单元格内部居中。
4. stretch：拉伸，占满单元格的整个宽度（默认值）。

结束语

那些独属于我的时光决定了我要成为谁…