如何用CSS Grid实现3列2行共5个元素的对称布局？

解决方案 #

完全可以实现，你之前的写法遗漏了跨列配置，Grid默认每个元素只占1列，所以需要给第4、第5个元素设置跨列规则就能匹配flex的效果。
下面是最小改动的实现代码：

CSS代码 #

* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
.my-grid {
  list-style-type: none;
  padding: 0;
  margin: 0 auto;
  display: grid;
  width: 162px;
  /* 拆分为6等份，方便跨列计算对齐 */
  grid-template-columns: repeat(6, 1fr);
  /* 每行固定高度50px */
  grid-auto-rows: 50px;
  /* 对应flex方案里li的2px外边距，间隙总宽度和原效果一致 */
  gap: 4px;
}
.my-grid li {
  border: 1px solid rgba(0, 0, 0 , 0.125);
  background:#c00;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
} 
/* 前3个元素每个跨2列，刚好占满6列 */
.my-grid li:nth-child(-n+3) {
  grid-column: span 2;
}
/* 第4、5个元素每个跨3列，各占整行一半 */
.my-grid li:nth-child(n+4) {
  grid-column: span 3;
}

HTML代码 #

<ul class="my-grid">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

原写法问题说明 #

你之前定义了3列网格，但没有给第4、5个元素设置跨列属性，两个元素默认各占1列，所以第二行会空出1列的位置，无法匹配flex方案的宽度效果。

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