CSS网格中心单元到视口，没有剩余空间

Question

我知道如何在可用空间内将单元居中-请参见下面的示例。如何调整下面的内容以将“ Two”单元格放置在视口的中心，而不仅仅是将其居中在“ One One One”之后的剩余空间中。我在第二行添加了“ Two”以显示中心位置。

"extraFiles": [
  {
    "from": "app.config",
    "to": "my-electron-app-name.exe.config"
  }
]

#one {
  grid-area: "one";
  justify-self: start;
  align-self: center;
}

#two {
  grid-area: "two";
  place-self: center;
}

#nav {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto;
  grid-template-areas: "one two";
}
#centered {
  text-align: center;
}