Нужно ли указывать "подсетку" на каждом уровне вложенной сетки CSS?

Question

Я пробовал реализацию Firefox спецификации подсеток в Nightly для надстройки, и у меня возник, как мне кажется, действительно простой вопрос, на который я не смог найти явного ответа в MDN.

Если у меня есть глубоко вложенная иерархия элементов и я хочу разместить только ее конечные узлы (самые глубокие в иерархии) в единой сетке, определенной в элементе верхнего уровня, должен ли я убедиться, что grid-template-columns / grid-template-rows установлен на "subgrid" для каждого промежуточного уровня + убедитесь, что у них есть grid-column / grid-row, установленный для охвата всей сетки предка?

В моем примере ниже я сначала сделал все с помощью div, но затем, когда я представил семантику, я обнаружил, что мне нужно снова и снова указывать "подсетку, которая должна охватывать всю ее родительскую сетку" в средних слоях, до точки, где я просто добавил один селектор, чтобы установить его по умолчанию для каждого элемента. (Код ниже также существует в этой скрипке). Если бы я начал с нуля, я бы вместо этого установил только grid-column / grid-row специально для конечных узлов, что привело к вопросу.

<ol class="root">
  <li class="topOfPage">
    <button>
      Read to Top of Page
    </button>
   </li>
   <li class="middleOfPage">
     <ol>
       <li class="topLine">
         <button>
           Read Previous Line
         </button>
       </li>
       <li class="middleLineContent">
         <ul>
           <li class="middleLine">
             <button>
               Read Current Line
              </button>
           </li>
           <li class="lineContent">
             <ol>
               <li class="prevWord">
                 <button>
                   Read Previous Word
                 </button>
               </li>
               <li class="middleWordContent">
               <ul>
                 <li class="middleWord">
                   <button>
                     Read Current Word
                   </button>
                 </li>
                 <li class="charContent">
                   <ol>
                     <li class="prevChar">
                       <button>
                         Read Previous Character
                        </button>
                     </li>
                     <li class="middleChar">
                       <button>
                         Read Current Character
                       </button>
                     </li>
                     <li class="nextChar">
                       <button>
                         Read Next Character
                       </button>
                     </li>
                   </ol>
                 </li>
               </ul>
             </li>
             <li class="nextWord">
               <button>
                 Read Next Word
               </button>
             </li>
           </ol>
         </li>
       </ul>
     </li>
     <li class="bottomLine">
       <button>
         Read Next Line
       </button>
     </li>
   </ol>
 </li>
 <li class="bottomOfPage">
   <button>
     Read to Bottom of Page
   </button>
 </li>
 </ol>

li {
  list-style-type: none;
}

ol,ul {
  padding-left: 0;
}

.root {
    display: grid;
    grid-template-columns: repeat(5, auto);
    grid-template-rows: repeat(5, auto);

    height: 250px;
}

.root * {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    grid-column: 1/-1;
    grid-row: 1/-1;
}

  .root .topOfPage {
    grid-column: 1 / 6;
    grid-row: 1 / 1;
  }

  .root .bottomOfPage {
    grid-column: 1 / 6;
    grid-row: 5 / 5;
  }

  .root .middleOfPage {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    grid-column: 1 / 6;
    grid-row: 2 / 6;
  }

  .root .middleOfPage .topLine {
    grid-column: 1 / 6;
    grid-row: 1 / 1;
  }

  .root .middleOfPage .bottomLine {
    grid-column: 1 / 6;
    grid-row: 3 / 3;
  }

  .root .middleOfPage .middleLineContent {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    grid-column: 1 / 6;
    grid-row: 2 / 2;
  }

  .root .middleOfPage .middleLineContent .middleLine {
    grid-column: 1 / 6;
    grid-row: 1 / 1;
  }

  .root .middleOfPage .middleLineContent .lineContent {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    grid-column: 1 / 6;
    grid-row: 1 / 1;
  }

  .root .middleOfPage .middleLineContent .lineContent .prevWord {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
  }

  .root .middleOfPage .middleLineContent .lineContent .nextWord {
    grid-column: 6 / 6;
    grid-row: 1 / 1;
  }

  .root .middleOfPage .middleLineContent .lineContent .middleWordContent {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    grid-column: 2 / 5;
    grid-row: 1 / 1;
  }

  .root .middleOfPage .middleLineContent .lineContent .middleWordContent .middleWord {
    grid-column: 1 / 4;
    grid-row: 1 / 1;
  }

  .root .middleOfPage .middleLineContent .lineContent .middleWordContent .charContent {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    grid-column: 1 / 4;
    grid-row: 1 / 1;
  }

  .root .middleOfPage .middleLineContent .lineContent .middleWordContent .charContent .prevChar {
    grid-column: 1 / 1;
    grid-row: 1 / 1;

    width: 75px;
  }

  .root .middleOfPage .middleLineContent .lineContent .middleWordContent .charContent .middleChar {
    grid-column: 2 / 2;
    grid-row: 1 / 1;

    width: 75px;
  }

  .root .middleOfPage .middleLineContent .lineContent .middleWordContent .charContent .nextChar {
    grid-column: 3 / 3;
    grid-row: 1 / 1;

    width: 75px;
  }