Grid 宫格常用布局的实现

两边无缝隙，每列之间有缝隙

width: 100%;  
dis@R_ 777 _2266@: grid;  
grid -t emplate-columns: re PE at(4,1fr);  
justify -i tems: stretch;  
grid-gap: 1px;

属性介绍： justify- IT ems 属性设置单元格内容的水平位置（左中右）， align-items 属性设置单元格内容的垂直位置（上中下）。

start：对齐单元格的起始边缘。 end：对齐单元格的结束边缘。 center ：单元格内部居中。 stretch：拉伸，占满单元格的整个 宽 度（默认值）。

属性介绍：容器指定了网格布局以后，接着就要划分行和列。 grid-template-columns 属性定义每一列的列宽， grid-template-rows 属性定义每一行的行高。 repeat(4,1fr) 表示重复，第一个参数表示次数，这里一共4列，那就是4次，1rf表示份的概念，repeat(4,1fr)代表平均分为4份

效果如下：

行与列间隙相同，填充排列 方向 优先填满垂直方向

.swiper -s lide-inner {  
    width: 100%;  
    display: grid;  
    /*优先垂直方向排列*/  
    grid-auto-flow: column;  
    /*分为三列，平均分*/  
    /*grid-template-columns: repeat(3, 1fr);*/  
    grid-template-columns: 1fr 1fr 1fr;  
    /*分为2行，平均分配*/  
    /*grid-template-rows: repeat(2, 1fr);*/  
    grid-template-rows: 1fr 1fr;  
    grid-row-gap: 10px;  
    grid-column-gap: 10px;  
    .card-item {  
        display: flex;  
        flex-wrap: wra p;   
        width: 230px;  
        h ei ght: 230px;
    }
}

属性介绍：划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再 开始 放入第二行，即下图数字的顺序。这个顺序由 grid-auto-flow 属性决定，默认值是 row ，即"先行后列"。也可以将它设成 column ，变成"先列后行"。

效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

总结

以上是 为你收集整理的 Grid 宫格常用布局的实现 全部内容，希望文章能够帮你解决 Grid 宫格常用布局的实现 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于Grid 宫格常用布局的实现的详细内容...