css - -ms-grid 子子规则

Question

我有以下 html 结构:

<div class="parent">
  <div class="child">
    <div class="sub-child-1"></div>
    <div class="sub-child-2"></div>
  </div>
</div>

并遵循CSS规则

.parent {
  display: -ms-grid;
  -ms-grid-columns: 150px 1fr 1fr;
}
.child {
  -ms-grid-column-span: 2;
}

如何将 sub-child-1 分配给第一列，将 sub-child-2 分配给第二列？

Answer 1

考虑到这在 IE 中有效(无法测试，我在 linux 上)它应该是:

.sub-child-1 {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.sub-child-2 {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}

我很确定您必须将 sub-child-1 和 sub-child-2 移动到父级，或者在子级而非父级上定义网格。