SOURCE

<div class="grid-container">
    <span class="grid-item">
        测试flex
    </span>
    <span class="grid-item">
        测试flex
    </span>
    <span class="grid-item">
        测试flex
    </span>
    <span class="grid-item">
        测试flex
    </span>
    <span class="grid-item">
        测试flex
    </span>
    <span class="grid-item">
        测试flex
    </span>
    <span class="grid-item">
        测试flex
    </span>
    <span class="grid-item">
        测试flex
    </span>
    <span class="grid-item">
        测试flex
    </span>
</div>

html,body{
    margin: 0;
    padding:0
}
.grid-container{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap:10px 10px;
    padding: 10px;
}
.grid-container span{
    display: block;
    background-color: #f00;
    color: #fff;
    width: 100%;
    height: 200px;
    font-size: 50px
}