0

我一直在尝试 Firefox 在 Nightly 中实现 CSS 子网格规范的插件，并且我认为这是一个非常基本的问题，我在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;
  }
4

0 回答 0