Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Grid auto placement in IE/EDGE

Tags:

css

css-grid

While using the old CSS grid spec that is supported by IE 11 and EDGE. Is it possible for the grid items to be auto placed like the current spec?

i.e. to not have to define the column on a grid item:

.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

like image 738
HastingsDirect Avatar asked Aug 01 '17 11:08

HastingsDirect


People also ask

Does Microsoft EDGE support CSS Grid?

The supporting browsers Other than in Internet Explorer, CSS Grid Layout is unprefixed in Safari, Chrome, Opera, Firefox and Edge. Support for all the properties and values detailed in these guides is interoperable across browsers.

Does grid work in IE11?

The grid-gap property, as well as its long-hand forms grid-column-gap and grid-row-gap , don't exist in the older spec, so they aren't supported by IE11.

How does auto-placement in CSS Grid work?

Auto-placement by column In this case grid will add items in rows that you have defined using grid-template-rows . When it fills up a column it will move onto the next explicit column, or create a new column track in the implicit grid. As with implicit row tracks, these column tracks will be auto sized.


1 Answers

The answer is NO (unfortunately).

Old specs section about auto-placement has such preamble

This section describes early thinking around automatic placement of Grid Items. Multiple algorithms are possible for such a feature. One is proposed here.

Run this code in IE/Edge and you'll see a lot of rows with 1 in console because IE/Edge stacks all grid items in first cell and you can't force IE/Edge to place grid items automatically. Setting -ms-grid-column and -ms-grid-row to auto won't change anything, because this value is not supported (as you can see in MSDN links). 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>
like image 89
Vadim Ovchinnikov Avatar answered Oct 24 '22 06:10

Vadim Ovchinnikov