css display: grid属性repeat

最新推荐文章于 2024-05-17 10:13:22 发布

我是全栈架构师

最新推荐文章于 2024-05-17 10:13:22 发布

阅读量1.6k

点赞数

分类专栏：前端文章标签： html css css3

本文链接：https://blog.csdn.net/mxj588love/article/details/112967653

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

.container {
    display: grid;
    box-shadow: 0 0 1px #cccccc;
    grid-template-columns: repeat(3,1fr);   /*相当于 1fr 1fr 1fr*/
    grid-template-rows: repeat(2,100px);    /*相当于100px 100px*/
    row-gap: 5px;
    column-gap: 5px;
}
.item {
    box-shadow: 0 0 5px #CCCCCC;
    padding:10px;
}

<div class="container">
    <div class="item item1">A</div>
    <div class="item item2">B</div>
    <div class="item item3">C</div>
    <div class="item item4">D</div>
    <div class="item item5">E</div>
    <div class="item item6">F</div>
</div>