grid布局

display: grid; 生成网格
grid-template-columns：竖向列宽的设置，表示三列，分别是300px;
grid-template-rows: 横向列高的设置，表示两行，分别是200px;
grid-row-gap: 横向行与行之间的间距（注意字面意思行与行）
grid-column-gap: 列与列之间的间距（注意字面意思列与列）
grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，第一个值表示行间距，第二个值表示列间距，只有一个值，则同时表示行间距和列间距

 .box{
            margin: 50px auto;
            width: 1000px;
            display: grid;
            grid-template-columns: 300px 300px 300px;
            grid-template-rows: 200px 200px;
            grid-row-gap: 20px;
            grid-column-gap: 50px;
            grid-gap: 20px 20px; 
        }