如何创建第一行2个、第二行3个共5个区块的CSS Grid布局

调整后代码 #

CSS 部分仅修改选择器逻辑即可，HTML 无需改动：

.container {
  display: grid;
  grid-template-columns: repeat(6, 40px);
  grid-auto-rows: 80px;
  grid-gap: 10px;
}

.block {
  background-color: red;
  grid-column-end: span 2;
}

/* 选中前2个元素做列偏移，实现第一行2个元素居中排布 */
.block:nth-child(-n+2) {
  background: blue;
  grid-column-start: 2;
}
.block:nth-child(2) {
  grid-column-start: 4;
}

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

逻辑说明 #

原代码使用nth-last-child选中最后2个元素做列偏移，所以2个元素会排在第二行，第一行自动排满3个。现在把选择器换成nth-child(-n+2)选中前2个元素做偏移，让前2个元素居中排列在第一行，剩余3个元素自动占满第二行的6列，刚好实现第一行2个、第二行3个的布局。

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