Automatische CSS-Rasterplatzierung in IE/EDGE

Question

Während die alte CSS-Rasterspezifikation verwendet wird, die von IE 11 und EDGE unterstützt wird. Ist es möglich, dass die Gitterelemente wie die aktuelle Spezifikation automatisch platziert werden?

d.h. zu haben, um nicht die Spalte auf einem Rasterelement zu definieren:

.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

Answer 1

Die Antwort ist NEIN (leider).

Old specs section about auto-placement hat eine solche Präambel

In diesem Abschnitt frühen Denken um die automatische Platzierung von Rasterelementen beschreibt. Für ein solches Merkmal sind mehrere Algorithmen möglich. Eins wird hier vorgeschlagen.

Führen Sie diesen Code in IE/Rand und Sie werden eine Menge von Zeilen mit 1 in Konsole, weil IE/Kanten stapelt alle Rasterelemente in der ersten Zelle und Sie können nicht IE/Rand zwingen Rasterelemente zu platzieren automatisch. Die Einstellung -ms-grid-column und -ms-grid-row auf auto wird nichts ändern, da dieser Wert nicht unterstützt wird (wie Sie in MSDN-Links sehen können). Demo:

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>