CSS repeat()函数auto-fit自动适应实例页面

回到相关文章 »

效果：

代码：

CSS代码：

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    border: 1px dashed skyblue;
}
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>
</div>