Grid 宫格常用布局的实现

Grid 宫格常用布局的实现,第1张

Grid 宫格常用布局的实现

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

width: 100%;  
display: grid;  
grid-template-columns: repeat(4,1fr);  
justify-items: stretch;  
grid-gap: 1px;

属性介绍:justify-items属性设置单元格内容的水平位置(左中右),align-items属性设置单元格内容的垂直位置(上中下)。


  • start:对齐单元格的起始边缘。


  • end:对齐单元格的结束边缘。


  • center:单元格内部居中。


  • stretch:拉伸,占满单元格的整个宽度(默认值)。


属性介绍:容器指定了网格布局以后,接着就要划分行和列。


grid-template-columns属性定义每一列的列宽,grid-template-rows属性定义每一行的行高。


repeat(4,1fr)表示重复,第一个参数表示次数,这里一共4列,那就是4次,1rf表示份的概念,repeat(4,1fr)代表平均分为4份

效果如下:

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

.swiper-slide-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: wrap;  
        width: 230px;  
        height: 230px;
    }
}

属性介绍:划分网格以后,容器的子元素会按照顺序,自动放置在每一个网格。


默认的放置顺序是"先行后列",即先填满第一行,再开始放入第二行,即下图数字的顺序。


这个顺序由grid-auto-flow属性决定,默认值是row,即"先行后列"。


也可以将它设成column,变成"先列后行"。


效果如下:

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


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/616718.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-14
下一篇 2022-04-14

发表评论

登录后才能评论

评论列表(0条)

保存