CSS Grid平板布局：实现首行1个div、次行2个div并排效果

核心实现逻辑 #

仅靠grid-template-columns无法实现同一网格内不同行列数不一致的效果，需要配合网格子项的跨列属性完成：

• 平板断点下将网格容器设置为2等分列
• 让第一个div横跨全部2列，独占第一行，剩余两个div自然排列在第二行各占1列
• 修正原代码中手机端repeat语法的空格错误，同时补全媒体查询的断点区间，避免平板样式覆盖桌面端3列效果

修正后完整代码 #

CSS 部分 #

.outer {
  display: grid;
  /* 可选：gap设置网格项间距，不需要可删除 */
  gap: 16px;
}

/* 手机端：屏幕宽度 <768px 单列排列 */
@media only screen and (max-width:767px) {
  .outer {
    grid-template-columns: 1fr;
  }
}

/* 平板端：屏幕宽度 768px~1023px 第一行1个、第二行2个 */
@media only screen and (min-width:768px) and (max-width:1023px) {
  .outer {
    grid-template-columns: 1fr 1fr;
  }
  /* 第一个子项横跨2列，独占整行 */
  .outer .inner:first-child {
    grid-column: 1 / 3;
  }
}

/* 桌面端：屏幕宽度 ≥1024px 三列同排 */
@media only screen and (min-width:1024px) {
  .outer {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

HTML 部分 #

原有HTML结构不需要做任何修改，直接复用即可：

<div class="outer">
  <div class="inner">
    <p>I am div 1</p>
  </div>
  <div class="inner">
    <p>I am div 2</p>
  </div>
  <div class="inner">
    <p>I am div 3</p>
  </div>
</div>

注意事项 #

• 原代码手机端写法repeat (1, 1fr)中repeat和括号之间多了空格，会导致CSS属性解析失效，直接写1fr或者修正为repeat(1, 1fr)即可生效
• 断点值1024px为通用平板/桌面分界值，可根据项目实际需求自行调整
• grid-column: 1 / 3的含义是子项从第1条列网格线开始，到第3条列网格线结束，刚好占满2列宽度，实现独占一行的效果

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