CSS多个repeat()函数同时使用示意实例页面

回到相关文章 »

效果：

代码：

CSS代码：

.container {
    display: grid;
    grid-column-gap: 5px;
    grid-template-columns: repeat(3, 40px) repeat(3, 60px) auto;
}
zxx-col {
    background-color: deepskyblue;
    text-align: center;
    color: #fff;
    padding: 50px 0;
}

HTML代码：

<div class="container">
    <zxx-col></zxx-col>
    <zxx-col></zxx-col>
    <zxx-col></zxx-col>
    <zxx-col></zxx-col>
    <zxx-col></zxx-col>
    <zxx-col></zxx-col>
    <zxx-col></zxx-col>
</div>