如何使用网格布局将盒子中心

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>

如何使运动盒与其他运动盒相同的宽度？

另外，我开始做一个网格容器，但随后在两个网格容器中分开的顶点有问题。也许这可以在一个容器中完成？在我的情况下，这里的文本和描述将是动态的，对象的数量也将是动态的。

有很多方法可以将网格项目集中。在此处查看各种方法：

• 以CSS网格为中心

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

当将::before和::after伪元素应用于元素时，它们会成为该元素的孩子（阅读更多）。

所以，网格容器上的伪元素成为网格项目。

将这些网格项目放在第一行的第一列和最后一列中。这将迫使"运动"项目集中。

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