如何使用 CSS Grid 实现 div 的交织布局（响应式跨行跨列排列）

CSS Grid是CSS中专门用于二维布局的模块，它允许我们同时控制元素在行和列两个方向上的位置，非常适合实现div的交织布局，也就是让多个div在网格中交错占位，形成错落有致的排列效果，同时还能结合响应式规则适配不同屏幕。

CSS Grid 实现交织布局的核心属性

要实现div的交织排列，首先需要了解几个核心的Grid属性：

• grid-template-columns / grid-template-rows：定义网格的列轨道和行轨道的大小，比如设置3列等宽轨道可以用grid-template-columns: repeat(3, 1fr)
• grid-column / grid-row：定义单个网格项占据的列范围和行范围，比如grid-column: 1 / 3表示元素从第一列开始到第三列之前结束，占据2列宽度
• grid-gap：设置网格项之间的间距，包括行间距和列间距

基础交织布局实现示例

我们先实现一个3列网格下的div交织布局，让不同div占据不同的行列范围，形成交错效果：

/* 容器样式 */
.grid-container {
    display: grid;
    /* 定义3列，每列等宽 */
    grid-template-columns: repeat(3, 1fr);
    /* 定义行高，自动适应内容 */
    grid-auto-rows: 120px;
    /* 网格项间距 */
    grid-gap: 15px;
    padding: 15px;
    background-color: #f5f5f5;
}

/* 网格项基础样式 */
.grid-item {
    background-color: #4a90e2;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border-radius: 6px;
}

/* 第一个div占据第1行第1列到第2列，跨2列 */
.item1 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

/* 第二个div占据第1行第3列，第2行也占据第3列，跨2行 */
.item2 {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
}

/* 第三个div占据第2行第1列 */
.item3 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

/* 第四个div占据第2行第2列 */
.item4 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

/* 第五个div占据第3行第1列到第3列，跨3列 */
.item5 {
    grid-column: 1 / 4;
    grid-row: 3 / 4;
}

对应的HTML结构如下：

<div class="grid-container">
    <div class="grid-item item1">div1 跨2列</div>
    <div class="grid-item item2">div2 跨2行</div>
    <div class="grid-item item3">div3</div>
    <div class="grid-item item4">div4</div>
    <div class="grid-item item5">div5 跨3列</div>
</div>

响应式适配调整

在移动端等小屏幕设备上，3列布局可能会显得拥挤，我们可以通过媒体查询调整网格列数，同时重新定义div的跨行列规则：

/* 屏幕宽度小于768px时的适配规则 */
@media screen and (max-width: 768px) {
    .grid-container {
        /* 小屏幕改为2列布局 */
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 100px;
    }

    /* 重置之前的跨列规则 */
    .item1 {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }

    .item2 {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    .item3 {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }

    .item4 {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }

    .item5 {
        grid-column: 2 / 3;
        grid-row: 3 / 5;
    }
}

注意事项

• 设置grid-column和grid-row时，数值范围是左闭右开，比如grid-column: 1 / 3实际占据第1列和第2列，共2列
• 如果网格项的总占位超出定义的轨道范围，Grid会自动生成隐式轨道，也可以通过grid-auto-rows或grid-auto-columns定义隐式轨道的大小
• 交织布局的跨行列规则需要根据实际内容调整，避免出现内容溢出网格项的情况，可以配合min-height等属性优化显示效果

CSS_Griddiv布局响应式布局跨行跨列修改时间：2026-06-19 11:57:27