如何使用网格布局居中？

Question

创建（最终）三层树视图结构体育>团队>球员进步：https://jsfiddle.net/zigzag/kusuz233/1/

body {
  margin: 10px;
}
.firstLevel {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 200px;
  background-color: #fff;
  color: #444;
  margin-bottom: 20px;
}

.firstLevel > .box{
    background-color: red;
}

.secondLevel > .box{
    background-color: gray;
}

.secondLevel {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 200px 200px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.box {
  color: #fff;
  padding: 20px;
  font-size: 150%;
}

<div class="firstLevel">
  <div class="box">Sports</div>

</div>
<div class="secondLevel">
  <div class="box a">NBA</div>
  <div class="box b">NFL</div>
  <div class="box c">NHL</div>
  <div class="box d">IPL</div>
  <div class="box e">MLB</div>
  <div class="box f">MLS</div>
</div>

如何让运动箱以与其他运动箱相同的宽度居中？

此外，我开始做一个网格容器，但后来问题是顶部节点在两个网格容器中分开。也许这可以在一个容器内完成？在我的情况下，这里的文字和描述将是动态的，因此对象的数量也是如此，只是为了计划......欣赏任何输入。

Answer 1

有许多方法可以使网格项目居中。在这里查看各种方法：

• Centering in CSS Grid

在这种特殊情况下，一个简单的解决方案是添加伪元素。总共只需要一个容器。

当::before和::after伪元素应用于元素时，它们成为该元素的子元素（read more）。

因此，网格容器上的伪元素成为网格项。

将这些网格项放在第一行的第一列和最后一列中。这将强制“运动”项目居中。

body {
  margin: 10px;
}

.firstLevel {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-auto-rows: 200px;
  grid-gap: 1em;
  background-color: #fff;
  color: #444;
}

.firstLevel::before {
  content: "";
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  /* border: 1px dashed black;  << remove commenting for illustration */
}

.firstLevel::after {
  content: "";
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  /* border: 1px dashed black;  << remove commenting for illustration */
}

.box {
  background-color: gray;
  color: #fff;
  padding: 20px;
  font-size: 150%;
}

.red {
  background-color: red;
}

<div class="firstLevel">
  <div class="box red">Sports</div>
  <div class="box a">NBA</div>
  <div class="box b">NFL</div>
  <div class="box c">NHL</div>
  <div class="box d">IPL</div>
  <div class="box e">MLB</div>
  <div class="box f">MLS</div>
</div>

jsFiddle demo