CSS Grid Layout - Adapt to Work in IE/Edge?

From this article

The IE/Edge version of the specification is prefixed with an -ms prefix and the properties implemented in IE/Edge are as follows:

    grid-template-columns as -ms-grid-columns
    grid-template-rows as -ms-grid-rows
    grid-row-start as -ms-grid-row
    grid-column-start as -ms-grid-column
    align-self as -ms-grid-column-align
    justify-self as -ms-grid-row-align

Are the values the same as the ones above or do they need to be reformatted?

So would just add this and that's it?

-ms-grid-template-columns: repeat(auto-fit, minmax(220px, 220px));

Select allOpen in new window

As the document says.

grid-template-columns as -ms-grid-columns

Sorry, I obviously mis-typed. But my question really was is that the only line necessary? It doesn't appear to be working. The grid is only 1 column wide.

I can't speak to it working or not - I avoid IE (and non standard implementations) as a rule

My advice - don't base your code on non-standard implementations.

Have you considered looking at flex as an alternative.

No I haven't. Do you have more info on that? Is it capable of doing an indeterminate number of columns and "wrapping" them based on the size of the browser window? The code above does in all browsers, except IE and Edge of course.

There is some overlap but each has its own features the other does not have so it comes down to what you are wanting to do.

This article describes Flexbox a bit more

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

These articles give a comparison between flexbox and grid
https://css-tricks.com/css-grid-replace-flexbox/
https://tutorialzine.com/2017/03/css-grid-vs-flexbox

Unless you know different, I don't think this will work:

Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns.

(from https://css-tricks.com/css-grid-replace-flexbox/)

I am essentially trying to lay out a responsive grid. It is rows and columns and the number of columns is contingent on how much space is available. The grid does this perfectly, in all browsers but Microsoft's, but from what I can tell (and please correct me if I'm wrong - I hope I am), Flexbox doesn't do this.

Then why not use a responsive framework like Bootstrap?

I'm pretty sure I tried that and couldn't get it to work properly. Does it have a simple responsive grid like I described?

That is pretty much the entire reason for its existence - you specify how you want the layout to be for different screen sizes and it stacks accordingly so

<div class="row">
   <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">Cell</div>
   <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">Cell</div>
   <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">Cell</div>
   <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">Cell</div>
   <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">Cell</div>
   <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">Cell</div>
   <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">Cell</div>
   <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">Cell</div>
   <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">Cell</div>
</div>

Select allOpen in new window

If you use that it will be a single column on extra small devices
2 columns on small
3 columns on medium
4 columns on large

It works on a 12 column layout but you can create a style sheet to have an base number of columns you want
This article discusses how to do that  https://www.experts-exchange.com/articles/28663/Create-N-column-layout-for-Bootstrap.html

Still doesn't look like it works quite like what I have. The code I gave above will do 1 column, 2, 3, 4,... etc. If you had a screen wide enough with enough resolution, it could do 50 (unlikely but you get my point). Pretty simplistic.

Yes, that's perfect!