CSS -- grid布局

设为网格布局以后，容器子元素（项目）的
float、
display: inline-block、
display: table-cell、
vertical-align和column-等设置都将失效。

基本布局

display: grid;

行内布局（此时容器为行内元素）

display: inline-grid;

属性

//属性定义每一列的列宽
grid-template-columns:100px 100px 100px;（以三行为例）

//属性定义每一行的行高。
grid-template-rows

row-gap: 20px; //（行间距）
column-gap: 20px; //（列间距）
合并简写形式: grid-gap (如果省略了第二个值，浏览器认为第二个值等于第一个值)
gap: 20px 20px;

//网格放置顺序
grid-auto-flow：
      row(先行后列)
      column(先列后行)
      row dense(先行后列,尽可能紧密填满，尽量不出现空格)
      column dense(先列后行，并且尽量填满空格)

//place-content: <align-content> <justify-content>

方法

//（1）repeat 简化重复的值
grid-template-columns: repeat(3, 33.33%);（以三行为例）

//（2）auto-fill（自动填充） 表示每列宽度100px，然后自动填充，直到容器不能放置更多的列
 grid-template-columns: repeat(auto-fill, 100px);

//（3）fr（倍数关系）  第一列的宽度为150像素，第二列的宽度是第三列的一半。
 grid-template-columns: 150px 1fr 2fr;

//（4）minmax 列宽就在最小值和最大值范围之间。
grid-template-columns: 1fr 1fr minmax(100px, 1fr);

//（5）auto  由浏览器自己决定长度
grid-template-columns: 100px auto 100px;

//（6）网格线的名称 使用方括号，指定每一根网格线的名字，方便以后的引用。允许同一根线有多个名字
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];

//（7）布局实例
//左边栏设为70%，右边栏设为30%。
grid-template-columns: 70% 30%;
//十二网格布局
grid-template-columns: repeat(12, 1fr);