这期内容当中小编将会给大家带来有关如何实现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
,变成"先列后行"。
上述就是小编为大家分享的如何实现Grid 宫格布局了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。