咨询：响应式设计下4单元格表格的优雅布局实现方式

用CSS Grid可以轻松搞定这个需求，不需要额外HTML结构或JS，纯CSS就能实现，具体方案如下：

方案一：网格区域（Grid Areas）直观定义布局 #

HTML结构 #

<div class="grid-container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
</div>

CSS样式 #

/* 桌面端布局：4单元格并排 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px; /* 可选：设置单元格间距 */
}

/* 移动端适配（断点可根据需求调整） */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
    /* 直接用网格区域定义蜗牛式布局 */
    grid-template-areas:
      "a b"
      "d c";
  }

  /* 给每个单元格分配对应区域 */
  .item:nth-child(1) { grid-area: a; }
  .item:nth-child(2) { grid-area: b; }
  .item:nth-child(3) { grid-area: c; }
  .item:nth-child(4) { grid-area: d; }
}

/* 可选：单元格基础样式，方便可视化 */
.item {
  padding: 1.5rem;
  text-align: center;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

方案二：行列定位（更简洁） #

如果觉得网格区域写法繁琐，可直接用grid-row和grid-column调整单元格位置，无需额外命名区域：

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 调整C和D的行列位置 */
  .item:nth-child(3) {
    grid-row: 2;
    grid-column: 2;
  }
  .item:nth-child(4) {
    grid-row: 2;
    grid-column: 1;
  }
}

方案优势 #

• 纯CSS控制，无需修改HTML结构，符合响应式设计最佳实践
• CSS Grid布局逻辑清晰，后续调整布局仅需修改CSS，维护成本低
• 两种方案按需选择：网格区域写法更直观，行列定位更简洁

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