CSS repeat()函数基本使用示意实例页面

回到相关文章 »

效果：

代码：

CSS代码：

.container {
    display: grid;
    grid-column-gap: 5px;
    grid-template-columns: repeat(4, 40px auto 60px);
}
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>
    <zxx-col></zxx-col>
    <zxx-col></zxx-col>
    <zxx-col></zxx-col>
    <zxx-col></zxx-col>
    <zxx-col></zxx-col>
</div>