JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<nav id="justify-content-control" class="h-control">
justify-content: 
  <label><input type="radio" name="just-cont" value="start">start</label>
  <label><input type="radio" name="just-cont" value="center" checked>center</label>
  <label><input type="radio" name="just-cont" value="end">end</label>
  <label><input type="radio" name="just-cont" value="s-btwn">space-between</label>
  <label><input type="radio" name="just-cont" value="s-arnd">space-around</label>
  <label><input type="radio" name="just-cont" value="s-even">space-evenly</label>
</nav>
<nav id="justify-items-control" class="h-control">
justify-items: 
  <label><input type="radio" name="just-item" value="start" checked>start</label>
  <label><input type="radio" name="just-item" value="center">center</label>
  <label><input type="radio" name="just-item" value="end">end</label>
  <label><input type="radio" name="just-item" value="stretch">stretch</label>
</nav>
<main>
  <ul>
  <li>Eins</li>
  <li>Zwei</li>
  <li>Sieben und siebzig</li>
  </ul>
  <div class="track col"></div>
  <div class="track col"></div>
  <div class="track col"></div>
  <div class="track row"></div>
  <div class="track row"></div>
  <div class="track row"></div>
</main>

CSS

.h-control {
  display: flex;
}
.h-control input[type=radio] {
   width: 0; margin:0; padding: 0;
}
.h-control label {
  text-align: center;
  flex: 1 0 3em;
  border: thin solid black;
}
.h-control label:has(:checked) {
  background-color: #ff0;
}
.h-control label:has(input:focus) {
  outline: 2px solid black;
}

.h-control:has([name=just-cont][value=start]:checked) ~ main { justify-content: start; }
.h-control:has([name=just-cont][value=center]:checked) ~ main { justify-content: center; }
.h-control:has([name=just-cont][value=end]:checked) ~ main { justify-content: end; }
.h-control:has([name=just-cont][value=s-btwn]:checked) ~ main { justify-content: space-between; }
.h-control:has([name=just-cont][value=s-arnd]:checked) ~ main { justify-content: space-around; }
.h-control:has([name=just-cont][value=s-even]:checked) ~ main { justify-content: space-evenly; }
.h-control:has([name=just-item][value=start]:checked) ~ main { justify-items: start; }
.h-control:has([name=just-item][value=center]:checked) ~ main { justify-items: center; }
.h-control:has([name=just-item][value=end]:checked) ~ main { justify-items: end; }
.h-control:has([name=just-item][value=stretch]:checked) ~ main { justify-items: stretch; }

main {
  display: grid;
  grid-template-columns: 12em 12em 12em;
  grid-template-rows: 9em 9em 9em;
  justify-content:center;
  background-color: #ff8;
  gap: 1em;
  margin: 2em;
}
main .track.col { border: thin dashed red; margin: -0.5em 0; place-self: stretch stretch; }
main .track.col::before {
  display: block;
  text-align: center;
  transform: translate(0px, 0.7em);
  color: red;
}
main .track.row { border: thin dotted blue; margin: 0 -0.5em; place-self: stretch stretch; }
main .track.row::before {
  display: block;
  transform: translate(1em, 4em);
  color: blue;
}
main :nth-child(1 of .track.col) { grid-area: 1/1/4/1; }
main :nth-child(1 of .track.col)::before { content: "Spalte 1"; }
main :nth-child(2 of .track.col) { grid-area: 1/2/4/2; }
main...