CSS repeat(min-content, max-content)示意实例页面

回到相关文章 »

效果：

代码：

CSS代码：

.container {
    display: grid;
    grid-column-gap: 5px;
    grid-template-columns: repeat(2, min-content auto max-content) 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>