使用CSS媒体查询实现交错/双栏内容的条件式展示

我正在设计一个包含文本块与图片的博客页面，需求如下：

• 小屏幕：文本与图片按HTML顺序交错排列（示例：Text1、Text2、Image1、Text3、Image2、Text4、Text5、Image3）
• 宽屏：分为两栏，文本居左、图片居右（示例：Text1对应Image1、Text2对应Image2、Text3对应Image3，Text4、Text5在左栏）

要求仅通过CSS媒体查询实现，不使用JavaScript。

我尝试过Flexbox与Grid布局，Grid是目前最优方案，但遇到两个问题：

• 指定grid-column将文本和图片分到对应列时，若图片比同行文本高，会产生大量空白
• 若仅设一行，所有元素会重叠

请问如何让左栏内容自然流动？

当前代码：

.project-mainflow {
    display: grid;
    grid-template-columns: 100%;
}

@media (min-width: 1200px) {
    .project-mainflow {
        grid-template-columns: 40vw 40vw;
    }
    .project-image {
        grid-column: 2;
        grid-row: 1;
    }
    .project-text {
        grid-column: 1;
        grid-row: 1;
    }
}

解决方案 #

核心思路是利用Grid的自动行布局和目标行定位，让左栏文本自然流式排列，右栏图片精准对应到指定文本块的行位置，同时避免空白浪费。

1. 调整HTML结构标记 #

给需要对应图片的文本块和图片添加专属类，方便精准绑定位置：

<div class="project-mainflow">
  <div class="project-text text-pair-1">Text1</div>
  <div class="project-text text-pair-2">Text2</div>
  <div class="project-image image-pair-1">Image1</div>
  <div class="project-text text-pair-3">Text3</div>
  <div class="project-image image-pair-2">Image2</div>
  <div class="project-text">Text4</div>
  <div class="project-text">Text5</div>
  <div class="project-image image-pair-3">Image3</div>
</div>

2. 优化Grid媒体查询代码 #

.project-mainflow {
    display: grid;
    grid-template-columns: 100%;
    gap: 1rem; /* 可选：添加间距提升可读性 */
}

@media (min-width: 1200px) {
    .project-mainflow {
        grid-template-columns: 40vw 40vw;
        grid-auto-flow: dense; /* 自动填充布局空白区域 */
        gap: 2rem;
    }
    /* 所有文本默认左栏 */
    .project-text {
        grid-column: 1;
    }
    /* 所有图片默认右栏 */
    .project-image {
        grid-column: 2;
    }
    /* 精准绑定文本与图片的行位置 */
    .text-pair-1 { grid-row: 1; }
    .image-pair-1 { grid-row: 1; }
    
    .text-pair-2 { grid-row: 2; }
    .image-pair-2 { grid-row: 2; }
    
    .text-pair-3 { grid-row: 3; }
    .image-pair-3 { grid-row: 3; }
}

关键说明 #

• grid-auto-flow: dense：让Grid自动填充布局中的空白区域，避免因图片高度过高导致的左栏空白
• 专属类绑定行位置：确保每张图片精准对应到目标文本块所在的行，未绑定的文本块（Text4、Text5）会在左栏自然向下流动
• 保留小屏幕的单列布局，完全符合响应式需求

灵活替代方案（无需手动指定行号） #

如果文本块高度不确定，可利用grid-row: span和align-self实现自适应对齐：

@media (min-width: 1200px) {
    .project-mainflow {
        grid-template-columns: 40vw 40vw;
        gap: 2rem;
    }
    .project-text { grid-column: 1; }
    .project-image { 
        grid-column: 2; 
        align-self: start; /* 图片顶部对齐对应文本块 */
    }
    /* 让第一张图片覆盖Text1和Text2的行高 */
    .image-pair-1 { grid-row: span 2; }
    .image-pair-2 { grid-row: 3; }
    .image-pair-3 { grid-row: 4; }
}

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