如何用CSS实现两行横向滚动Div并自定义元素排列顺序？

要实现固定两行、元素独立宽度且整体横向滚动的布局，同时保持第一行从左到右、第二行接续排列的顺序，可以用以下两种CSS方案：

方案一：手动拆分两行（精确控制每行元素） #

适合需要固定每行元素数量的场景，结构清晰，容易控制。

HTML结构 #

<div class="scroll-container">
  <div class="content-wrapper">
    <!-- 第一行元素 -->
    <div class="row">
      <div class="item">元素1（宽200px）</div>
      <div class="item">元素2（宽150px）</div>
      <div class="item">元素3（宽250px）</div>
    </div>
    <!-- 第二行元素 -->
    <div class="row">
      <div class="item">元素4（宽180px）</div>
      <div class="item">元素5（宽220px）</div>
      <div class="item">元素6（宽160px）</div>
      <div class="item">元素7（宽240px）</div>
    </div>
  </div>
</div>

CSS样式 #

.scroll-container {
  overflow-x: auto; /* 开启横向滚动 */
  padding: 10px 0;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px; /* 两行之间的间距 */
  width: max-content; /* 宽度由最宽的一行决定 */
}

.row {
  display: flex;
  gap: 12px; /* 行内元素间距 */
}

.item {
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 4px;
  width: fit-content; /* 自适应内容宽度，也可设置固定值如 width: 200px; */
  /* 可选：设置最小宽度保证元素不会过窄 */
  min-width: 120px;
}

方案二：自动分配两行（动态元素数量） #

适合元素数量不固定的场景，无需手动拆分，由CSS自动将元素分配到两行。

HTML结构 #

<div class="scroll-grid">
  <div class="item">元素1（宽200px）</div>
  <div class="item">元素2（宽150px）</div>
  <div class="item">元素3（宽250px）</div>
  <div class="item">元素4（宽180px）</div>
  <div class="item">元素5（宽220px）</div>
  <div class="item">元素6（宽160px）</div>
  <div class="item">元素7（宽240px）</div>
</div>

CSS样式 #

.scroll-grid {
  overflow-x: auto; /* 开启横向滚动 */
  display: grid;
  grid-template-rows: repeat(2, auto); /* 固定两行 */
  grid-auto-columns: max-content; /* 每个列宽度由元素内容/设置的宽度决定 */
  gap: 12px; /* 元素间的行、列间距 */
  padding: 10px 0;
}

.item {
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 4px;
  /* 可设置固定宽度，或留空让内容自适应 */
  /* width: 200px; */
}

原理说明 #

• 方案一通过外层横向滚动容器包裹纵向排列的两行flex容器，width: max-content确保内容宽度由最宽的一行决定，超出容器宽度时触发横向滚动。
• 方案二利用Grid布局的grid-template-rows: repeat(2, auto)固定行数，grid-auto-columns: max-content保证每个元素宽度独立，元素会自动按行优先顺序填充两行，整体宽度由所有列的总宽度决定，超出时触发横向滚动。

注意事项 #

• 如果需要元素宽度固定，直接给.item设置width即可，无需fit-content或max-content。
• 可通过调整gap值控制元素间的间距，提升布局美观度。
• 为了兼容旧浏览器，可添加前缀或降级方案（如对不支持Grid的浏览器使用方案一）。

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