display:gridでIE11用のプレフィックスを付けたmixin

Edgeは大丈夫みたい。
IE11早く消えないかな。
下記で大まかな対応。gap系はどうにもならないのかな。

IE11を考慮して、endの値は省略できない。

//gridのベンダープレフィックス付与版mixin
@mixin grid(){
display: -ms-grid;
display: grid;
}

@mixin gtc($val){
-ms-grid-columns: $val;
grid-template-columns: $val;
}

@mixin gtr($val){
-ms-grid-rows: $val;
grid-template-rows: $val;
}

@mixin gc($start,$end){
-ms-grid-column: $start;
-ms-grid-column-span: $end – $start;
grid-column: #{$start}/#{$end};
}

@mixin gr($start,$end){
-ms-grid-row: $start;
-ms-grid-row-span: $end – $start;
grid-row: #{$start}/#{$end};
}

シェアする

  • このエントリーをはてなブックマークに追加

フォローする