如何用CSS Grid实现屏幕缩放时图表的列重排与顺序调整？

方案一：基于原有HTML结构，利用order属性调整顺序 #

无需修改现有HTML，仅通过CSS即可实现需求：

HTML（保持原结构）

<div class="my-grid">
  <div class="chart previous">Previous 1</div>
  <div class="chart current">Current 1</div>
  <div class="chart previous">Previous 2</div>
  <div class="chart current">Current 2</div>
</div>

CSS实现

/* 宽屏布局：两列，Previous左、Current右 */
.my-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem; /* 可选，增加图表间距 */
}

.previous {
  grid-column: 1;
}

.current {
  grid-column: 2;
}

/* 窄屏布局：单列，所有Current优先显示 */
@media (max-width: 768px) {
  .my-grid {
    grid-template-columns: 1fr;
  }

  /* 通过order值控制显示顺序：值越小越靠前 */
  .current {
    order: 1;
  }

  .previous {
    order: 2;
  }
}

原理说明：

• 宽屏时通过grid-column指定列位置，自动适配不同高度的图表，行高会根据每行最高的元素自动调整。
• 窄屏时切换为单列，利用order属性让所有current类元素排在前面，同一order值的元素会保持DOM中的原有顺序，完美匹配需求。

方案二：调整HTML结构，分组管理更直观 #

如果需要更清晰的DOM结构，可将Current和Previous图表分别分组，维护性更强：

HTML结构调整

<div class="chart-wrapper">
  <!-- Current图表组 -->
  <div class="current-group">
    <div class="chart current">Current 1</div>
    <div class="chart current">Current 2</div>
  </div>
  <!-- Previous图表组 -->
  <div class="previous-group">
    <div class="chart previous">Previous 1</div>
    <div class="chart previous">Previous 2</div>
  </div>
</div>

CSS实现

/* 宽屏布局：两列分组显示 */
.chart-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.previous-group {
  grid-column: 1;
  display: grid;
  gap: 1.5rem;
}

.current-group {
  grid-column: 2;
  display: grid;
  gap: 1.5rem;
}

/* 窄屏布局：单列，Current组优先显示 */
@media (max-width: 768px) {
  .chart-wrapper {
    grid-template-columns: 1fr;
  }

  .current-group {
    order: 1;
  }

  .previous-group {
    order: 2;
  }
}

优势：DOM结构与业务逻辑对应，后续新增图表时只需对应添加到分组中，无需额外调整CSS。

关于你遇到的grid-template-areas重叠问题 #

grid-template-areas需要明确指定每个区域的行列位置，当图表高度不固定、行数动态变化时，很容易出现区域重叠。相比之下，直接使用grid-column或order属性更灵活，无需预先定义固定的网格区域，更适配动态内容场景。

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