Grid宫格怎么使用，常用布局如何完美实现

发布时间：2023-09-05 14:22:05 所属栏目：语言来源：

导读：这篇文章给大家介绍了“Grid宫格怎么使用，常用布局如何实现”的相关知识，讲解详细，步骤过程清晰，有一定的借鉴学习价值，因此分享给大家做个参考，感兴趣的朋友接下来一起跟随小编看看吧。

两边无缝

这篇文章给大家介绍了“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，变成"先列后行"。

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!