将网格单元定位到指定区域已有

Question

我想将一些命名的网格单元放入命名区域，但其中一些未按预期正确定位。

.parent {
  display: grid;
  cursor: e-resize;
  grid-template-columns: [col-0-start] 277px [col-1-start] 277px [col-2-start] 277px [col-3-start] 277px [col-4-start] 277px [col-5-start];
  grid-auto-flow: column;
  grid-template-rows: [row-8_00-start] 42px [row-8_00-end row-8_15-start] 42px  [row-8_15-end row-8_30-start] 42px [row-8_30-end row-8_45-start] 42px  [row-8_45-end row-9_00-start] 42px [row-9_00-end row-9_15-start] 42px  [row-9_15-end row-9_30-start] 42px [row-9_30-end row-9_45-start] 42px  [row-9_45-end row-10_00-start] 42px [row-10_00-end row-10_15-start] 42px  [row-10_15-end row-10_30-start] 42px [row-10_30-end row-10_45-start] 42px  [row-10_45-end row-11_00-start] 42px [row-11_00-end row-11_15-start] 42px  [row-11_15-end row-11_30-start] 42px [row-11_30-end row-11_45-start] 42px  [row-11_45-end row-12_00-start] 42px [row-12_00-end row-12_15-start] 42px  [row-12_15-end row-12_30-start] 42px [row-12_30-end row-12_45-start] 42px  [row-12_45-end row-13_00-start] 42px [row-13_00-end row-13_15-start] 42px  [row-13_15-end row-13_30-start] 42px [row-13_30-end row-13_45-start] 42px  [row-13_45-end row-14_00-start] 42px [row-14_00-end row-14_15-start] 42px  [row-14_15-end row-14_30-start] 42px [row-14_30-end row-14_45-start] 42px  [row-14_45-end row-15_00-start] 42px [row-15_00-end row-15_15-start] 42px  [row-15_15-end row-15_30-start] 42px [row-15_30-end row-15_45-start] 42px  [row-15_45-end row-16_00-start] 42px [row-16_00-end row-16_15-start] 42px  [row-16_15-end row-16_30-start] 42px [row-16_30-end row-16_45-start] 42px  [row-16_45-end row-17_00-start] 42px [row-17_00-end row-17_15-start] 42px  [row-17_15-end row-17_30-start] 42px [row-17_30-end row-17_45-start] 42px  [row-17_45-end row-18_00-start] 42px [row-18_00-end row-18_15-start] 42px  [row-18_15-end row-18_30-start] 42px [row-18_30-end row-18_45-start] 42px  [row-18_45-end row-19_00-start] 42px [row-19_00-end row-19_15-start] 42px  [row-19_15-end row-19_30-start] 42px [row-19_30-end row-19_45-start] 42px  [row-19_45-end row-20_00-start] 42px [row-20_00-end row-20_15-start] 42px  [row-20_15-end row-20_30-start] 42px [row-20_30-end row-20_45-start] 42px  [row-20_45-end row-21_00-start] 42px [row-21_00-end row-21_15-start] 42px  [row-21_15-end row-21_30-start row-end];
}

.child {
    display: grid;
    grid-area: row-09_00-start / col-0-start / row-09_30-start / col-1-start;
    /*
    grid-row: row-09_00-start / row-09_30-start;
    grid-column: col-0-start / col-1-start;
    */
    -webkit-tap-highlight-color: #0000;
    padding: 8px;
    cursor: pointer;
    color: #4D4D4D;
    grid-template-rows: repeat(3,1fr);
    grid-template-columns: repeat(2,1fr);
    border-radius: 8px;
    background-color: #d1fee7;
    border: 2px solid #47CD8C;
}

<div class="parent"><div class="child">Child</div></div>

另外，它与网格行业和网格都无法使用。

codesandbox 示例

Answer 1

它解决了。问题是在10的数字命名的情况下，如果在其行命名中，儿童具有0，则没有以0的命名。