9

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

Vadim Ovchinnikov
  • 13,327
  • 5
  • 62
  • 90
HastingsDirect
  • 628
  • 1
  • 9
  • 17

1 Answers1

9

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>
Vadim Ovchinnikov
  • 13,327
  • 5
  • 62
  • 90
  • Great explanation, looks like CSS grid is still unusable for my needs and browser support level then (dammit) – HastingsDirect Aug 02 '17 at 08:10
  • 1
    @JoeHastings You can add some primitive JavaScript for some cases that will simulate auto-placement and apply this script only for IE and Edge. It depends on complexity of your layout. – Vadim Ovchinnikov Aug 02 '17 at 08:37
  • I'm using it on a search results grid where I don't know how many items there will be, I _could_ add some js to handle the placement but I think sticking to another CSS only solution is preferable – HastingsDirect Aug 02 '17 at 11:33
  • As all the elements in your grid are uniform, no need for CSS Grid here. Just use Flexbox. – Valentine Shi Aug 04 '18 at 16:32
  • @bob-12345 Question was about autoplacement in IE. This is just simple demo and in very simple cases of course you can replace CSS Grid with other CSS modules but in more advanced cases you can't. – Vadim Ovchinnikov Aug 04 '18 at 17:04
  • 1
    @VadimOvchinnikov, well 'in more advanced cases' is to broad to practically discuss. You can use CSS Grid practically everywhere in IE10/Egde comfortably, where the usage of, say, Flexbox is impractical. Even without autoplacement. Because CSS Grid is intended to deal with known number of non-uniform elements. Whereas Flexbox is intended to deal with the opposite case, unknown number of uniform elements. However uninformed question is, the answers should lead readers in the correct direction, even if they are broader then a question – Valentine Shi Aug 05 '18 at 11:24
  • I would strongly recommend everyone interested in this topic to read these [1](https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/), [2](https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/), [3](https://css-tricks.com/css-grid-in-ie-faking-an-auto-placement-grid-with-gaps/) IE CSS Grid series articles to find out much more possibilities available for IE/Egde CSS grid. Including autoplacement. – Valentine Shi Aug 05 '18 at 11:28