使用column-count时第二列先填充，如何让第一列优先填充？

在部分屏幕尺寸下，使用column-count实现两列列表布局时，第二列会先被填充且高度更高。如何确保按照从左到右的阅读逻辑，先填充第一列、最后填充第二列？注：无法设置固定高度。

原始HTML代码 #

<ul class="list--underline-large">
    <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</li>
    <li>When an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
    <li>When an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
    <li>When an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
    <li>When an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
    <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</li>
    <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</li>
    <li>When an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
    <li>It to make a type specimen book.</li>
    <li>It to make a type specimen book.</li>
    <li>It to make a type specimen book.</li>
</ul>

原始CSS代码 #

.list--underline-large {
    column-count: 2;
    column-gap: 80px;
    break-inside: avoid-column;
    page-break-inside: avoid;
}

.list--underline-large li {
    border-bottom: 1px solid #143b38;
    display: inline-block;
    margin-bottom: 30px;
    padding: 0 0 30px 0;
    width: 100%;
}

column-count采用**垂直流式（列优先）**排版逻辑，内容会先填满第一列高度再流向第二列。当列表项高度差异较大且设置break-inside: avoid-column时，浏览器为避免拆分元素，可能会调整内容分布，导致第二列先被填充，不符合从左到右的阅读习惯。

由于无法设置固定高度，推荐使用Flexbox或CSS Grid实现**水平流式（行优先）**布局，即先填满第一行再换行，自然实现从左到右的填充顺序：

方案1：Flexbox实现 #

修改CSS如下：

.list--underline-large {
    display: flex;
    flex-wrap: wrap;
    gap: 80px; /* 替代column-gap，控制列间距 */
    box-sizing: border-box;
}

.list--underline-large li {
    border-bottom: 1px solid #143b38;
    margin-bottom: 30px;
    padding: 0 0 30px 0;
    /* 每列占比50%，减去列间距的一半，确保两列刚好填满容器 */
    flex: 1 1 calc(50% - 40px);
    box-sizing: border-box;
}

• flex-wrap: wrap允许列表项换行
• flex: 1 1 calc(50% - 40px)确保列表项在空间足够时占满半宽，空间不足时自动缩小避免溢出
• gap: 80px直接控制列间距，无需额外计算padding/margin

方案2：CSS Grid实现 #

修改CSS如下：

.list--underline-large {
    display: grid;
    /* 自动填充两列，每列最小宽度为50%减去列间距的一半 */
    grid-template-columns: repeat(auto-fill, minmax(calc(50% - 40px), 1fr));
    gap: 80px; /* 同时控制列、行间距，需单独行间距可改用row-gap */
    box-sizing: border-box;
}

.list--underline-large li {
    border-bottom: 1px solid #143b38;
    margin-bottom: 30px;
    padding: 0 0 30px 0;
}

• grid-template-columns: repeat(auto-fill, minmax(...))自动生成适配屏幕的两列布局
• 1fr确保列宽自动平分剩余空间，保持布局平衡

两种方案均无需固定高度，且严格遵循从左到右、先填满第一行再换行的阅读逻辑，彻底解决column-count的排版顺序问题。

内容的提问来源于stack exchange，提问作者elisa