Grid 宫格常见合理布局的完成

日期:2021-02-28 类型:科技新闻 

关键词:微信公众号平台小程序,微信打分小程序,小程序发布,小程序大全,微信小程序编程

两侧无缝拼接隙,每列之间有间隙

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)表明反复,第1个主要参数表明次数,这里1共4列,那便是4次,1rf表明份的定义,repeat(4,1fr)意味着均值分成4份

实际效果以下:

行与列空隙同样,填充排序方位优先选择铺满竖直方位

.swiper-slide-inner {  
    width: 100%;  
    display: grid;  
    /*优先选择竖直方位排序*/  
    grid-auto-flow: column;  
    /*分成3列,均值分*/  
    /*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;
    }
}

特性详细介绍:区划网格之后,器皿的子元素会依照次序,全自动置放在每个网格。默认设置的置放次序是"优先后列",即先铺满第1行,再刚开始放入第2行,即下图数据的次序。这个次序由grid-auto-flow特性决策,默认设置值是row,即"优先后列"。还可以将它设成column,变为"先列后行"。

实际效果以下:

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。