如何仅用CSS实现移动端单列、桌面端双列的侧边栏元素响应式重排？

最近我在做一个响应式布局需求：移动端单列展示所有内容，桌面端分成两列，主内容在左侧，侧边栏元素在右侧依次紧凑排列。之前用JavaScript实现过类似效果，但想着现代浏览器支持这么好，纯CSS应该就能搞定，于是尝试用Grid布局，结果一开始遇到了坑——桌面模式下侧边栏元素没法紧凑排列，中间总是有空隙，一度怀疑Grid是不是不适合这个场景。后来在@vineet-tyagi的提醒下，加了两个属性就解决了，分享一下整个过程：

问题场景 #

我需要的布局效果：

• 桌面端（宽度>600px）：主内容块固定在左列，侧边栏块依次排列在右列，不会因为左列主内容高度不同而出现空隙
• 移动端（宽度≤600px）：所有内容块自动堆叠成单列

初始尝试（存在问题） #

下面是我最初的Grid代码，在桌面模式下，侧边栏元素会因为左列主内容的高度差异，在右列留下空白，无法紧密排列：

CSS 代码 #

.container {
  display: grid;
  grid-template-columns: auto auto;
}
.main {
  background-color: blue;
  grid-column: 1;
}
.sidebar {
  background-color: green;
  grid-column: 2;
}

@media screen and (max-width: 600px) {
  .container {
    grid-template-columns: auto;
  }
  .main, .sidebar {
    grid-column: 1;
  }
}

HTML 代码 #

<div class="container">
  <div class="main"><span>A1</span></div>
  <div class="sidebar"><span>B1</span></div>
  <div class="main"><span>A2</span></div>
  <div class="main"><span>A3</span></div>
  <div class="sidebar"><span>B2</span></div>
  <div class="main"><span>C1</span></div>
</div>

最终可行的解决方案 #

在@vineet-tyagi的建议下，我给容器添加了grid-auto-flow: dense，同时给侧边栏元素设置height: fit-content，完美解决了侧边栏元素的排列问题。

完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<style>
  .container {
    display: grid;
    grid-template-columns: auto auto;
    grid-auto-flow: dense;
  }
  .main {
    background-color: blue;
    grid-column: 1;
  }
  .sidebar {
    background-color: green;
    grid-column: 2;
    height: fit-content;
  }

  @media screen and (max-width: 600px) {
    .container {
      grid-template-columns: auto;
    }
    .main, .sidebar {
      grid-column: 1;
    }
  }
</style>
</head>
<body>
  <div class="container">
    <div class="main">
      A1
   </div>
    <div class="sidebar">
      B1
   </div>
    <div class="main">
      A2<br>A2<br>A2<br>A2
   </div>
    <div class="main">
      A3
   </div>
    <div class="sidebar">
      B2
   </div>
    <div class="main">
      C1
   </div>
  </div>
</body>
</html>

关键修改说明 #

• grid-auto-flow: dense：允许Grid布局自动填充布局中的空白区域，让侧边栏元素可以向上填补左列主内容留下的空隙
• height: fit-content：让侧边栏元素的高度仅适配自身内容，避免因为继承行高而占据过多垂直空间，确保后续侧边栏元素可以紧密排列

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