0

i'm trying to build a css layout grid, i'm usig the grid shorthand proerty in this way:

body{
grid:
        [row-one] "grid-col-1 grid-col-1" 1fr [row-one-end]
        / 1fr 1fr;

}

now, i'm using only the fr unit so i decided to do in this way:

@mixin grid-template($row,$col){
  grid: repeat($row, 1fr) / repeat($col,1fr)
}

then in the body css i have:

@include grid-template(1,2);

is it a correct approach? and how can use the -ms- prefix? something like

@mixin grid-template($row,$col){
      grid: repeat($row, 1fr) / repeat($col,1fr)
      -ms-grid: repeat($row, 1fr) / repeat($col,1fr)
    }

would work? thanks

Giacomo Ciampoli
  • 821
  • 3
  • 16
  • 33
  • 1
    css grid is only in candidate recommendation at the moment and as such, microsoft have not fully implemented it. They have partial support using the -ms- but I think it is for an [outdated version of grid](https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407) so probably won't work as you expect it to. More information can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement – Pete Jan 18 '18 at 13:51
  • 1
    There are some good articles about implementing fallback. example https://www.chenhuijing.com/blog/basic-grid-with-fallbacks/ – sol Jan 18 '18 at 14:00
  • @Pete All the major browsers implement grid at the moment except Opera and UC. IE will never get the feature completely. – Rob Jan 18 '18 at 14:04
  • @Pete Edge 16 (released in October last year) supports grid, despite grid still being a candidate recommendation. – Facundo Corradini Jan 18 '18 at 15:23
  • Ah cool, I was going to edit my above comment to say *implemented it in ie* but was unable to by the time I had realised edge now supports it – Pete Jan 18 '18 at 15:29

1 Answers1

2

Not sure what you mean by "microsoft browser", but Edge 16 (current version) is compatible with CSS grid without issues.

As for Internet Explorer, versions 10 and 11 are compatible with an older specification for the grid layout, which is more limited and have different property names. So just adding the -ms won't do, you need to take care of the property name differences. Autoprefixer can sort of do that for you, but you need to set the option as it's disabled by default.

Personally I would just serve a fallback with floats, inline-blocks, flex, etc to IE. The CSS Grid specification is extremely good at overriding any of those fallbacks, so should be quite smooth.

Facundo Corradini
  • 3,825
  • 9
  • 24
  • i'm currently implementing a fallback css with flexboxes, seems pretty ok and the layout is not so different, also flexboxes are well supported – Giacomo Ciampoli Jan 19 '18 at 18:19