如何在CSS网格的中心第三列？ [重复]

Question

此问题已经在这里有了答案：

How to center elements on the last row in CSS Grid?（6个答案）

[20天前关闭。

我有三个div。如何将两个div列作为列，但第三列需要居中，而一列则没有网格区域？

如图所示。

我尝试过：

 display:grid;
 grid-template-columns:1fr 1fr;
 grid-template-row:1fr 1fr;

但是它创建了四列。不是我所需要的。

Answer 1

创建一个具有4列的网格，每个div应当跨越2列，最后一个子级应从第二列开始。

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
  grid-gap: 2px;
}

.grid > div {
  height: 20vmin;
  width: 20vmin: 20vmin;
  grid-column-end: span 2;
  background: red;
}

.grid > div:last-child {
  grid-column-start: 2;
}

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
</div>