如何使用 CSS Grid 实现先列后行的三列布局？

在CSS Grid布局中，默认的元素排列顺序是先行后列，也就是先填满第一行的所有列，再换行到下一行。但很多时候我们需要先列后行的排列效果，比如三列布局下，元素先依次放在第一列的各个位置，再放到第二列，最后到第三列，这种布局在内容卡片、列表展示场景中非常实用。

先列后行布局的核心原理

要实现先列后行的排列，核心是修改Grid容器的grid-auto-flow属性。这个属性用来控制自动放置的网格项是如何排列的，默认值是row，也就是按行排列。我们只需要把它设置为column，就可以让网格项按列排列，再配合grid-template-columns定义三列的宽度，就能实现先列后行的三列布局。

基础实现步骤

1. 定义Grid容器

首先给父容器设置display: grid，声明为Grid布局容器。然后使用grid-template-columns定义三列的列宽，这里可以根据需求设置固定宽度或者自适应宽度。

2. 设置自动排列方向

给容器添加grid-auto-flow: column，让自动放置的网格项按列排列。同时需要设置容器的高度，否则按列排列时容器高度会被内容撑开，无法体现先列后行的效果。

3. 添加网格项内容

在容器内部添加对应的子元素，这些子元素会自动按照先列后行的规则排列。

完整代码示例

下面是一个可以直接运行的完整示例，实现固定高度下的先列后行三列布局：

/* 容器样式 */
.grid-container {
    display: grid;
    /* 定义三列，每列宽度相等 */
    grid-template-columns: repeat(3, 1fr);
    /* 设置自动排列方向为列，实现先列后行 */
    grid-auto-flow: column;
    /* 设置容器高度，让元素按列填充 */
    height: 400px;
    gap: 16px;
    padding: 16px;
    background-color: #f5f5f5;
}

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

对应的HTML结构如下：

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
</div>

在这个示例中，8个网格项会先填满第一列的3个位置（1、2、3），再填满第二列的3个位置（4、5、6），最后第三列放剩下的2个位置（7、8），完全符合先列后行的排列规则。

不同场景的适配调整

自适应高度的场景

如果不想固定容器高度，也可以结合grid-template-rows定义每行的高度，限制每列的元素数量。比如设置grid-template-rows: repeat(3, 100px)，那么每列最多放3个元素，超出3个的元素会自动到下一列。

.auto-height-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 定义每行高度为100px，每列最多3个元素 */
    grid-template-rows: repeat(3, 100px);
    grid-auto-flow: column;
    gap: 16px;
    padding: 16px;
    background-color: #f5f5f5;
}

响应式场景

在移动端可以配合媒体查询调整列数，比如屏幕宽度小于768px时改为两列布局，同时保持先列后行的排列规则：

@media (max-width: 768px) {
    .grid-container {
        /* 移动端改为两列 */
        grid-template-columns: repeat(2, 1fr);
        height: 500px;
    }
}

常见问题说明

• 如果没有设置容器高度，按列排列时容器高度会随着内容增加，看起来会和默认的行排列效果一样，所以需要固定高度或者定义行模板。
• grid-auto-flow: column只会改变自动放置的网格项的排列方向，如果手动给网格项设置了grid-column或者grid-row定位，会优先按照手动定位的规则排列。
• 如果三列的列宽需要不同，可以修改grid-template-columns的值，比如设置为200px 1fr 150px，分别对应第一列200px、第二列自适应、第三列150px。

总结：实现CSS Grid先列后行的三列布局，核心就是给Grid容器设置grid-auto-flow: column，同时配合grid-template-columns定义三列，再根据需求设置容器高度或者行模板即可，实现方式非常简单，适配性也很强。

CSS_Grid三列布局grid-template-columnsgrid-auto-flow网格布局修改时间：2026-06-10 11:24:38