grid布局

display: grid;  
//行

//每一行中有几块，每块所占的width的百分比(1)
grid-template-columns: 70% 30%; 

//每个div的width 100px,自动排行，超出自动换行（1）
grid-template-columns: repeat(auto-fill, 100px);

//相当于一行有3个div ，他们的长度是百分比33.33% ， 这个width是固定的不会随着内容而撑开 (1)
grid-template-columns: repeat(3, 33.33%);

//[]里面的值随便填，[a1]相当于这行第一个width100px , [a2]第二个100px [a3] 剩下的全是[a3]的
grid-template-columns: [a1] 100px [a2] 100px [a3] auto;

//上面的简洁版 表示第一div的长度100px 第二个div的长度自适应 第三个100px
grid-template-columns: 100px auto 100px; 

//minmax函数两个参数 第一个最小width值 第二个最大不能超过另外两个的长度
grid-template-columns: 1fr 1fr minmax(100px, 1fr);

//fr相当于把剩下的width分成几份 2fr 1rf 相当于把剩下width分成3份 第一个div有2份
grid-template-columns: 1fr 1fr;

//行于行的间隔
grid-row-gap: 20px; 
//列与列的间隔
grid-column-gap: 20px; 
//他们可以简写成 div的两边还不会有间隔 只是内容与内容间的间隔，省略了第二个值，浏览器认为第二个值等于第一个值。
grid-gap: 20px 20px;