Css -ms网格子规则

我有以下html结构：

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

---

如何将

sub-child-1

分配给第一列，将

sub-child-2

分配给第二列？

考虑到这在IE中有效（无法测试，我在linux上），应该是：

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

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

---

我很确定您必须将子级1和子级2移动到父级，或者在子级而不是父级上定义一个网格。

您能否提供一个不太简单的示例，以便我了解您试图实现的目标，并可能提供解决方案？

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

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