css - 使用 CSS Grid 将所有项目放在屏幕中央

Question

所以基本上我想做的是在屏幕中间有9个盒子。

这是我尝试过的：

main {
  border: 4px solid black;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-items: center;
}

.box1 {
  background: red;
  width: 50%;
}

.box2 {
  background: blue;
  width: 50%;
}

.box3 {
  background: green;
  width: 50%;
}

<main>
  <div class="box1">
    <h1>Box 1</h1>
  </div>

  <div class="box2">
    <h1>Box 2</h1>
  </div>

  <div class="box3">
    <h1>Box 3</h1>
  </div>


  <div class="box1">
    <h1>Box 4</h1>
  </div>

  <div class="box2">
    <h1>Box 5</h1>
  </div>

  <div class="box3">
    <h1>Box 6</h1>
  </div>


  <div class="box1">
    <h1>Box 7</h1>
  </div>

  <div class="box2">
    <h1>Box 8</h1>
  </div>

  <div class="box3">
    <h1>Box 9</h1>
  </div>
</main>

这几乎可以满足我的要求。

所以我得到的是：

-bbb-

-bbb-

-bbb-

与 - 是自由空间。

我想要的是这个：

-bbb-

-bbb-

-bbb-

这样 9 个盒子实际上是相互接触的。

有没有办法做到这一点？

（我想坚持grid-template-columns: 1fr 1fr 1frand grid-template-rows: 1fr 1fr 1fr）

泰维姆 :)

标签： csscss-grid

Answer 1

有没有办法做到这一点？（我想坚持grid-template-columns: 1fr 1fr 1frand grid-template-rows: 1fr 1fr 1fr）

不，没有办法做到这一点。

因为您已将列设置为1fr每个列，所以它们将以相等的长度分布在容器的宽度上。因此，列不居中。

您必须执行以下操作：grid-template-columns: 1fr auto auto auto 1fr，1fr列没有内容并且仅用于间距。这种设置会将三个内柱固定在中心。