55202


Gulpでautoprefixerを用いていて、コンパイル後のcssには-ms-
のベンダープレフィックスは追加されているのですが、IE11だとレイアウトが崩れてしまいます。

崩れるというよりも具体的にはレイアウトが一つだけになってしまいます。

**HTML**

[code]

    <div class="grid">
        <div class="item">
        テスト
        </div>
        <div class="item">
        テスト
        </div>
        <div class="item">
        テスト
        </div>
        <div class="item">
        テスト 
        </div>
        <div class="item">
        テスト
        </div>
    </div
    
[/code]

**gulpfile.js**

[code]

    autoprefixer({
     grid: true,
     browsers: ["ie >= 11"]
    })
    
[/code]

**CSS**

[code]

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 1em;
    }
    
[/code]


CC BY-SA 4.0
2019-05-23T12:52:14.243
55200
2019-05-24T03:18:20.520
2019-05-24T03:18:20.520
32986
34420
question
css gulp sass
autoprefixerでgridを有効にしているのにIE11でレイアウトが崩れる


Autoprefixer の grid オプションの `true` は、 `no-autoplace` の別名です。しかし、 `true` という表記は
**廃止予定** になっているため、今後 Autoprefixer を導入する場合、使用するべきではありません。

> ## [Options](https://github.com/postcss/autoprefixer#options)
>
> Function `autoprefixer(options)` returns a new PostCSS plugin. See [PostCSS
> API] for plugin usage documentation.
>
>   * `grid` (false|"autoplace"|"no-autoplace"): should Autoprefixer add IE
> 10-11 prefixes for Grid Layout properties?
>     * `"no-autoplace"`: enable Autoprefixer grid translations but _exclude_
> autoplacement support. You can also use `/* autoprefixer grid: no-autoplace
> */` in your CSS. ( **alias for the deprecated`true` value**)
>

また、グリッドの自動配置を行なうにもかかわらず、 grid オプションに `no-autoplace` と同等の役割を持つ `true`
を設定することは不適切です。そのため、今回 grid オプションに設定するべき値は `autoplace` です。

[code]

    autoprefixer({
      grid: "autoplace",
      browsers: ["ie >= 11"]
    })
    
[/code]

* * *

次に、グリッドの自動配置は `grid-template-rows` プロパティ、 `grid-template-columns` プロパティの
**両方が設定されていなければ動作しません** 。

> ## [Grid Autoplacement support in
> IE](https://github.com/postcss/autoprefixer#grid-autoplacement-support-in-
> ie)
>
> If the `grid` option is set to `"autoplace"`, limited autoplacement support
> is added to Autoprefixers grid translations. You can also use the `/*
> autoprefixer grid: autoplace */` control comment to enable autoplacement
>
> Autoprefixer will only autoplace grid cells if both `grid-template-rows` and
> `grid-template-columns` has been set. If `grid-template` or `grid-template-
> areas` has been set, Autoprefixer will use area based cell placement
> instead.
>
> Autoprefixer supports autoplacement by using `nth-child` CSS selectors. It
> creates [number of columns] x [number of rows] `nth-child` selectors. For
> this reason Autoplacement is only supported within the explicit grid.

`grid-template` プロパティ、もしくは `grid-template-areas` プロパティなどを使用するのでなければ、前述した 2
つのプロパティを設定してください。

[code]

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: auto auto auto;
      grid-gap: 1em;
    }
    
[/code]


CC BY-SA 4.0
2019-05-23T16:33:16.087
55202
2019-05-23T16:33:16.087
32986
55200
answer