如何在CSS Grid中实现响应式列转行：首列占满行，后两列平分？

你只需要在目标media query中重新定义Grid的列模板，并让第一个子元素横跨所有列即可实现需求：

.thegrid {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 40px;
}

/* 示例断点，可根据实际需求调整 */
@media (max-width: 768px) {
  .thegrid {
    grid-template-columns: 1fr 1fr; /* 定义两列平分的布局 */
  }
  .thegrid > div:first-child {
    grid-column: 1 / -1; /* 让第一个子元素横跨所有列，占满整行 */
  }
}

效果说明： #

• 在非响应式状态下，保持你原本的3列布局：第一列占剩余空间，后两列自适应内容宽度。
• 触发media query后，布局切换为：
  • 第一个子元素单独占满一行
  • 第二、第三个子元素在同一行，各占50%的宽度平分空间

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