web-dev-qa-db-ja.com

IE / EDGEでのCSSグリッドの自動配置

IE 11およびEdgeでサポートされている古いCSSグリッド仕様を使用している間。グリッドアイテムを現在の仕様のように自動配置することは可能ですか？

つまり、グリッドアイテムに列を定義する必要はありません。

.item:nth-child(1) {
    -ms-grid-column: 1;
}
.item:nth-child(2) {
    -ms-grid-column: 2;
}
.item:nth-child(n) {
    -ms-grid-column: n;
}

https://codepen.io/JoeHastings/pen/mMPoqB

csscss-grid
8
HastingsDirect

答えはNOです（残念ながら）。

自動配置に関する古い仕様のセクション そのような前文があります

このセクションでは、グリッドアイテムの自動配置に関する初期の考え方について説明します。このような機能には、複数のアルゴリズムが可能です。 1つはここで提案されます。

このコードをIE/Edgeで実行すると、コンソールに1の行が多数表示されます。これは、IE/Edgeがすべてのグリッドアイテムを最初のセルにスタックし、IE/Edgeにグリッドアイテムを自動的に配置させることができないためです。 -ms-grid-column および -ms-grid-row をautoに設定しても、この値はサポートされていないため、何も変更されません（ご覧のとおり）。 MSDNリンク内）。デモ：

var gridItems = document.querySelectorAll(".grid__item");
for (var i = 0; i < gridItems.length; i++) {
  var gridItem = gridItems[i];
  console.log(window.getComputedStyle(gridItem)["-ms-grid-row"]);
  console.log(window.getComputedStyle(gridItem)["-ms-grid-column"]);
}
.grid {
  display: -ms-grid;
  -ms-grid-columns: 100px 100px 100px;
  -ms-grid-rows: 100px 100px 100px;
}

.grid__item {
  -ms-grid-row: auto;
  -ms-grid-column: auto;
  background-color: tomato;
  color: white;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="grid">
  <div class="grid__item">One</div>
  <div class="grid__item">Two</div>
  <div class="grid__item">Three</div>
  <div class="grid__item">Four</div>
  <div class="grid__item">Five</div>
  <div class="grid__item">Six</div>
  <div class="grid__item">Seven</div>
  <div class="grid__item">Eight</div>
  <div class="grid__item">Nine</div>
</div>
6
Vadim Ovchinnikov