css display: grid布局grid-template-columns

<style type="text/css">
    .content{
        display: grid;
        grid-template-columns: 300px 300px 300px;    /*fr, 每个元素的占比*/
        grid-template-rows: 200px 200px;
        row-gap: 5px;
        column-gap: 5px;
        justify-content: center;  /*设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式*/
        align-content: center; 
    }
    .item{
        box-shadow: 0 0 10px #cccccc;
        text-align: center;
    } 
</style>

<div class="content">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

效果如下: