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最初の列と2番目の列に割り当てるにはどうすればよい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 を親に移動するか、親の代わりに子にグリッドを定義する必要があると確信しています。