Grid 宫格常用布局的实现
发布时间：2020-01-10 16:48:30 作者：MangoGoing 
我要评论
我要评论这篇文章主要介绍了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，变成"先列后行"。
效果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了解析CSS中的Grid布局完全指南的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2019-04-09
Grid做前端的同学应该都很熟悉了，这篇文章主要介绍了10分钟理解CSS3 Grid布局，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-20
这篇文章主要介绍了css中grid属性的使用详解的相关资料，详细的介绍了grid属性，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-26
这篇文章主要介绍了CSS Grid 网格布局全解析的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-29- 本文通过各种实例向大家阐述CSS Grid布局，让我们一起领略其强大的魅力,需要的朋友可以参考下2014-12-30
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
在这篇文章中，主要向大家介绍如何让自己的浏览器支持CSS Grid Layout模块功能,需要的朋友可以参考下2014-12-30- 在这篇文章中简单的介绍了CSS Grid Layout，以及为什么要使用他，并且介绍了其一些术语：网格线、网格轨道、网格单元格、网格区域和网格容器等，为后面如何学习和使用CSS G2014-12-30
- 这篇文章主要介绍了使用CSS Grid布局实现网格的流动,需要的朋友可以参考下2014-12-30
最新评论