Как создать навигацию с вкладками для переменного количества столбцов, используя ТОЛЬКО CSS

Question

Я пытаюсь найти общее решение проблемы, с которой сталкиваюсь довольно часто.

Я пытаюсь использовать флажок в тандеме с сеткой CSS, чтобы создать навигационное меню с вкладками, которое не нужно изменять при изменении HTML.Если вы запустите фрагмент кода, вы увидите, что вы можете добавить или удалить любое из трио ввода / метки / раздела, а CSS может просто обработать это.строка для охвата всех столбцов, эффективно заполняющих доступное пространство.Я понял, что не могу получить строку, охватывающую все столбцы, если я не определю явную сетку . К сожалению, определение заданного количества столбцов лишает смысла то, что я пытаюсь сделать.

Работая с ограничением, что HTML всегда будет блоками ввода / метки / раздела в таком порядке, есть ли способ заставить эту вторую строку охватить все столбцы без определения заданного количества столбцов?Я пытался заставить это работать, используя flexbox, но я не мог получить правильные столбцы.

Я пытаюсь получить это только с помощью CSS, пожалуйста, без JavaScript.

#Wrapper {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-rows: 2em calc(100% - 2em);
  height: 100%;
  width: 100%;
}

#Wrapper section,
input[name=buttons] {
  display: none
}

/*This doesn't work*/
#Wrapper section {
  grid-column-start: 1;
  grid-column-end: -1;
}

#Wrapper input[name=buttons]+label {
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
  grid-row-start: 1;
  grid-row-end: 2;
}

#Wrapper>input[name=buttons]:checked+label {
  background-color: red;
}

#Wrapper>input[name=buttons]:checked+label+section {
  display: block;
  width: 100%;
}

<div id='Wrapper'>
  <input type='radio' id='TabButton1' name='buttons' checked></input>
  <label for='TabButton1'>SECTION 1</label>
  <section>
    This is some content 1
  </section>

  <input type='radio' id='TabButton2' name='buttons'></input>
  <label for='TabButton2'>SECTION 2</label>
  <section>
    This is some content 2
  </section>

  <input type='radio' id='TabButton3' name='buttons'></input>
  <label for='TabButton3'>SECTION 3</label>
  <section>
    This is some content 3
  </section>

  <input type='radio' id='TabButton4' name='buttons'></input>
  <label for='TabButton4'>SECTION 4</label>
  <section>
    This is some content 4
  </section>

  <input type='radio' id='TabButton5' name='buttons'></input>
  <label for='TabButton5'>SECTION 5</label>
  <section>
    This is some content 5
  </section>

</div>