如何使用CSS grid创建3x3网格并将元素放置在指定网格列位置

你可以通过以下两种CSS Grid方案实现目标布局，无需修改现有HTML结构：

方案1：直接指定子元素网格位置 #

通过grid-column和grid-row属性手动指定第3、4个元素的位置，自动跳过空位：

.container{
  border: 1px solid;
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 0;
}

.item{
  border: 1px solid lightgrey;
  padding: 10px;
}

/* 第三个元素放在第二行第二列 */
.item:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

/* 第四个元素放在第二行第三列 */
.item:nth-child(4) {
  grid-column: 3;
  grid-row: 2;
}

方案2：使用grid-template-areas（更易维护） #

通过命名网格区域的方式实现，.在grid-template-areas中专门用来代表空位：

.container{
  border: 1px solid;
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 0;
  grid-template-areas: 
    "item1 item2 ."
    ". item3 item4"; 
}

.item{
  border: 1px solid lightgrey;
  padding: 10px;
}

.item:nth-child(1) { grid-area: item1; }
.item:nth-child(2) { grid-area: item2; }
.item:nth-child(3) { grid-area: item3; }
.item:nth-child(4) { grid-area: item4; }

两种方案都可以实现你需要的错位空位布局，第二种方案可读性更高，后续调整空位位置也更方便。

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