gird布局

//设置gird布局
display: grid;
//一行分为几个     
grid-template-columns: repeat(4,1fr);
等同于：grid-template-columns:1fr 1fr 1fr 1fr;
//网格与网格之间的间隔
gap:10px; 

对子元素占位控制

#box .one{
    grid-row: 1/3;
    grid-column: 1/3;
}
其中：
    grid-row: 1/3; 
    //`grid-row: 1/3;` 表示网格项从第1条网格行线开始，并跨越到第3条网格行线（但不包括第3条网格行线对应的网格行）。换句话说，它覆盖了第1行和第2行。
    grid-column: 1/3;
    //`grid-column: 1/3;` 类似地，表示网格项从第1条网格列线开始，并跨越到第3条网格列线（但不包括第3条网格列线对应的网格列）。它覆盖了第1列和第2列。

响应式布局

display: grid;
grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
//每行最小容纳200px，最大1fr