这期内容当中小编将会给大家带来有关如何实现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 宫格布局了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://www.jb51.net/css/709769.html
