【css】网格布局

效果：

【css】网格布局

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

.contentDiv{
    margin: 10px 120px;
    /* 转化元素类型 */
    display: grid;
    /* 设置网格的间隙 */
    grid-gap: 10px;
    /* 5 列  */
    grid-template-columns: repeat(5, 1fr);
}
.content{
    min-height: 260px;
    border-radius: 5px;
    background-color: #ffffff;
}