css实现grid,格子之间的间距一样。

最新推荐文章于 2024-08-02 12:09:11 发布

山闻愚

最新推荐文章于 2024-08-02 12:09:11 发布

阅读量1.2k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/xjj1314/article/details/110390531

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<div id="grid">

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>

</div>



#grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

@media (max-width: 750px) {
    grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 751px) and (max-width: 1200px){
    grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 1201px){
    grid-template-columns: repeat(4, 1fr);
}