两边无缝，每列之间有空隙宽度：100%；显示：网格；网格模板列：重复（4,1fr）；证明项目：拉伸；网格间隙：1px；属性介绍：justify-items属性设置单元格内容的水平位置（左、中、右），align-items属性设置单元格内容的垂直位置（上、中、下）。start：对齐到单元格的起始边缘。end：对齐到单元格的结束边缘。center：单元格在内部居中。stretch：拉伸以填充单元格的整个宽度（默认值）。属性介绍：容器指定网格布局后，接下来要分行分列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。repeat(4,1fr)表示重复，第一个参数表示次数，一共有4列，也就是4次，1rf表示parts的概念，repeat(4,1fr)表示平均为分为4部分，效果如下：row和column的间隙相同，填充和排列方向先垂直方向填充。swiper-slide-inner{宽度：100%；显示：网格；/*垂直方向优先排列*/grid-auto-flow:column;/*分为三列，平均得分*//*grid-template-columns:repeat(3,1fr);*/grid-template-columns:1fr1fr1fr;/*分成2行，均匀分布*//*grid-template-rows:repeat(2,1fr);*/grid-template-rows:1fr1fr;网格行间距：10px；网格列间隙：10px；.card-item{显示：flex;弹性包装：包装；宽度：230px；高度：230px；}}属性介绍：网格划分后，容器的子元素会自动按顺序放入每个网格中。默认的放置顺序是“先行后列”，即先填充第一行，再放置第二行，也就是下图中数字的顺序。这个顺序由grid-auto-flow属性决定，默认值为row，即“先行，后列”。也可以设置成列，变成“先列后行”。效果如下：
