使用 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>

这几乎就是我想要的。

所以我得到的是：

-b-b-b-

-b-b-b-

-b-b-b-

with - 可用空间。

我想要的是这个：

-bbb-

-bbb-

-bbb-

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

有没有办法做到这一点？

（我想抓住 grid-template-columns: 1fr 1fr 1fr 和 grid-template-rows: 1fr 1fr 1fr）

tyvm :)

Answer 1

<块引用>

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

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

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

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