How to center a box using grid layout?

Question

creating an (ultimately) three tier tree view structure sports > teams> players progress: 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>

How do I get the sports box to be centered with same width as the others?

Also, I started out doing one grid container but then had issue with the top node so separated in two grid containers. perhaps this can be accomplished within just one container? In my case the text and description here will be dynamic and so will the number of objects so just planning for that... Appreciate any input.

Answer 1

There are many ways to center grid items. See various methods here:

• Centering in CSS Grid

In this particular case, a simple solution would be the addition of pseudo-elements. Only one container is needed overall.

When the ::before and ::after pseudo-elements are applied to an element, they become children of that element (read more).

So, pseudo-elements on a grid container become grid items.

Place those grid items in the first and last columns of the first row. This will force the "Sports" item to be centered.

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