如何使用CSS grid-template-areas实现菱形排列的正方形div布局

错误原因 #

• ID属性全局唯一，不可重复使用，你给多个div设置同一个id="square"属于非法写法，选择器也只会匹配到第一个元素，应该替换为class="square"。
• grid-template-areas的规则是：相同的区域名会把对应的所有网格单元格合并为一个整块区域。你所有占位都写了square，相当于整个网格只有一个合并后的square区域，所有div都指定grid-area: square会全部重叠在这个区域，自然只能看到一个正方形。
• CSS语法错误：.container的闭合大括号位置错误，把.square的样式包裹在了容器选择器内部，样式不会生效。
• 没有给正方形设置背景填充，就算位置正确也看不到元素。

正确实现代码 #

HTML

<div class='container'>
  <!-- 共24个正方形，对应布局2+4+6+6+4+2的数量要求 -->
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

CSS

.container {
  display: grid;
  /* 定义6列，每列宽50px和正方形尺寸匹配 */
  grid-template-columns: repeat(6, 50px);
  /* 定义6行，每行高50px */
  grid-template-rows: repeat(6, 50px);
  gap: 0;
}
.square {
  width: 50px;
  height: 50px;
  background-color: #222;
}
/* 第一行2个正方形，从第3列开始放置 */
.square:nth-child(1) { grid-row: 1; grid-column: 3; }
.square:nth-child(2) { grid-row: 1; grid-column: 4; }
/* 第二行4个正方形，从第2列开始放置 */
.square:nth-child(3) { grid-row: 2; grid-column: 2; }
.square:nth-child(4) { grid-row: 2; grid-column: 3; }
.square:nth-child(5) { grid-row: 2; grid-column: 4; }
.square:nth-child(6) { grid-row: 2; grid-column: 5; }
/* 第三行6个正方形，占满整行 */
.square:nth-child(7) { grid-row: 3; grid-column: 1; }
.square:nth-child(8) { grid-row: 3; grid-column: 2; }
.square:nth-child(9) { grid-row: 3; grid-column: 3; }
.square:nth-child(10) { grid-row: 3; grid-column: 4; }
.square:nth-child(11) { grid-row: 3; grid-column: 5; }
.square:nth-child(12) { grid-row: 3; grid-column: 6; }
/* 第四行6个正方形，占满整行 */
.square:nth-child(13) { grid-row: 4; grid-column: 1; }
.square:nth-child(14) { grid-row: 4; grid-column: 2; }
.square:nth-child(15) { grid-row: 4; grid-column: 3; }
.square:nth-child(16) { grid-row: 4; grid-column: 4; }
.square:nth-child(17) { grid-row: 4; grid-column: 5; }
.square:nth-child(18) { grid-row: 4; grid-column: 6; }
/* 第五行4个正方形，从第2列开始放置 */
.square:nth-child(19) { grid-row: 5; grid-column: 2; }
.square:nth-child(20) { grid-row: 5; grid-column: 3; }
.square:nth-child(21) { grid-row: 5; grid-column: 4; }
.square:nth-child(22) { grid-row: 5; grid-column: 5; }
/* 第六行2个正方形，从第3列开始放置 */
.square:nth-child(23) { grid-row: 6; grid-column: 3; }
.square:nth-child(24) { grid-row: 6; grid-column: 4; }

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