CSS网格中的居中正方形

Question

我正在尝试创建四个以正方形模式显示的均匀间隔的正方形（两个在顶部，两个在底部），并以页面为中心，就像这样：

我已经尝试在CSS网格中执行此操作，但是当网格fr太大时，div会停留在fr的右侧，并且使两列之间的距离更远，而与浏览器的宽度无关，就像这样：

我想将爱达荷州和内华达州的div移到fr的右侧，因此所有四个div的距离都相同。

到目前为止是我的代码：谢谢！

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 20px;
}

.idaho {
  grid-column: 2/3;
  grid-row: 1/2;
  height: 300px;
  width: 300px;
  background-color: gray;
}

.utah {
  grid-column: 3/4;
  grid-row: 1/2;
  height: 300px;
  width: 300px;
  background-color: gray;
}

.nevada {
  grid-column: 2/3;
  grid-row: 2/3;
  height: 300px;
  width: 300px;
  background-color: gray;
}

.arizona {
  grid-column: 3/4;
  grid-row: 2/3;
  height: 300px;
  width: 300px;
  background-color: gray;
}

<div class="grid">
  <div class="idaho">
    <h2>Idaho</h2>
  </div>

  <div class="utah">
    <h2>Utah</h2>
  </div>

  <div class="nevada">
    <h2>Nevada</h2>
  </div>

  <div class="arizona">
    <h2>Arizona</h2>
  </div>

</div>

Answer 1

代替此：

grid-template-columns: 1fr 1fr 1fr 1fr

使用此：

grid-template-columns: 1fr auto auto 1fr

.grid {
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 20px;
}

.idaho {
  grid-column: 2/3;
  grid-row: 1/2;
  height: 300px;
  width: 300px;
  background-color: gray;
}

.utah {
  grid-column: 3/4;
  grid-row: 1/2;
  height: 300px;
  width: 300px;
  background-color: gray;
}

.nevada {
  grid-column: 2/3;
  grid-row: 2/3;
  height: 300px;
  width: 300px;
  background-color: gray;
}

.arizona {
  grid-column: 3/4;
  grid-row: 2/3;
  height: 300px;
  width: 300px;
  background-color: gray;
}

<div class="grid">
  <div class="idaho">
    <h2>Idaho</h2>
  </div>

  <div class="utah">
    <h2>Utah</h2>
  </div>

  <div class="nevada">
    <h2>Nevada</h2>
  </div>

  <div class="arizona">
    <h2>Arizona</h2>
  </div>

</div>

---

当将四列设置为1fr时，将在所有列之间平均分配容器空间。当您加宽屏幕时，列将以相等的比例扩展，从而创建出比正方形大小还要宽的列。

当将内部列设置为auto时，它们的大小将调整为内容宽度。然后，您可以在外部列上使用1fr来消耗相反方向上的所有可用空间，始终将内部列固定在中心。