質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

解決済

1回答

8839閲覧

グリッドレイアウトがIE11で崩れる(Autoprefixer使用)

umauman

総合スコア57

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

1グッド

1クリップ

投稿2019/04/11 07:16

実現したいこと& 問題点

グリッドレイアウトでカラムレイアウトを表示したいと思っています。
グリッドアイテムがカラム落ちしていく仕様です。
GulpでAutoprefixerを使用していて、コンパイル後のCSSを見るとベンダープレフィックスは
追加されているのですが、IE11だとレイアウトが崩れています。(グリッドアイテムが重なっている?)
IE以外のブラウザでは問題無く表示されています。

イメージ説明

HTML

html

1<div class="grid"> 2 <div class="grid-item"> 3 テストテストテスト 4 </div> 5 <div class="grid-item"> 6 テストテストテスト 7 </div> 8 <div class="grid-item"> 9 テストテストテスト 10 </div> 11 <div class="grid-item"> 12 テストテストテスト 13 </div> 14 <div class="grid-item"> 15 テストテストテスト 16 </div> 17</div>

SCSS

scss

1.grid { 2 display: grid; 3 grid-template-columns: 1fr 1fr 1fr; 4 grid-gap: 10px; 5}

コンパイル後のCSS(IE11で崩れる)

css

1.grid { 2 display: -ms-grid; 3 display: grid; 4 -ms-grid-columns: 1fr 1fr 1fr; 5 grid-template-columns: 1fr 1fr 1fr; 6 grid-gap: 10px; 7}

Autoprefixerの設定

autoprefixer({ grid: true, browsers: ["last 2 versions", "ie >= 11"] })

改善すべき箇所をご指摘いただけるととても助かります。
cssでどのように記述されていればIEでもちゃんと表示されるかだけでもご回答いただけるとありがたいです。

退会済みユーザー👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

Autoprefixer の設定を以下のように変更し、

JavaScript

1autoprefixer({ 2 browsers: ["last 2 versions", "ie >= 11"], 3 grid: "autoplace" // trueは no-autoplace を表す。 autoplace に変更 4})

SCSS を以下のようにすることで、この CSS は IE11 上でも動作するようになると思います。

SCSS

1.grid { 2 display: grid; 3 grid-template-columns: 1fr 1fr 1fr; 4 grid-template-rows: auto auto auto; /* 変更 */ 5 grid-gap: 10px; 6 .grid-item { 7 background: #ffa; 8 } 9}

Autoprefixer を実行すると出力される CSS は以下のようになり、 IE11 でも動作することがわかります(動作確認用リンク)。

CSS

1.grid { 2 display: -ms-grid; 3 display: grid; 4 -ms-grid-columns: 1fr 10px 1fr 10px 1fr; 5 grid-template-columns: 1fr 1fr 1fr; 6 -ms-grid-rows: auto 10px auto 10px auto; 7 grid-template-rows: auto auto auto; 8 grid-gap: 10px; 9} 10 11.grid>*:nth-child(1) { 12 -ms-grid-row: 1; 13 -ms-grid-column: 1; 14} 15 16.grid>*:nth-child(2) { 17 -ms-grid-row: 1; 18 -ms-grid-column: 3; 19} 20 21.grid>*:nth-child(3) { 22 -ms-grid-row: 1; 23 -ms-grid-column: 5; 24} 25 26.grid>*:nth-child(4) { 27 -ms-grid-row: 3; 28 -ms-grid-column: 1; 29} 30 31.grid>*:nth-child(5) { 32 -ms-grid-row: 3; 33 -ms-grid-column: 3; 34} 35 36.grid>*:nth-child(6) { 37 -ms-grid-row: 3; 38 -ms-grid-column: 5; 39} 40 41.grid>*:nth-child(7) { 42 -ms-grid-row: 5; 43 -ms-grid-column: 1; 44} 45 46.grid>*:nth-child(8) { 47 -ms-grid-row: 5; 48 -ms-grid-column: 3; 49} 50 51.grid>*:nth-child(9) { 52 -ms-grid-row: 5; 53 -ms-grid-column: 5; 54} 55 56.grid .grid-item { 57 background: #ffa; 58}

投稿2019/04/11 08:26

編集2019/04/11 09:13
s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

umauman

2019/04/11 09:09

こちらで無事解決しました。ありがとうございます! SCSS上すっきり記述できるのでとても嬉しいです。 1点だけ細かなことで恐れ入りますが、下記変更も何か意味がありますか? どちらでもIEで問題なく表示はされるようですが.. browsers: ["last 2 versions", "ie >= 11"] ↓↓↓ browsers: ["ie >= 11"],
s8_chu

2019/04/11 09:13

> 1点だけ細かなことで恐れ入りますが、下記変更も何か意味がありますか? 質問文からコードを写し間違えているだけで、特に意味はありません。 回答文を修正しました。
umauman

2019/04/11 09:18

何度もすみません。とても助かりました!
umauman

2019/04/11 09:30

何度もすみません...解決したかのように見えたのですが グリッドアイテムが9個以上になると再度表示が崩れてしまう(重なる?)ようです。
s8_chu

2019/04/11 09:45

`grid-template-rows`プロパティを修正すれば良いと思います。
umauman

2019/04/11 09:55 編集

autoの数を増やしていかないといけないということですね.. 下記のような感じ grid-template-rows: auto auto auto auto auto ...; アイテム数が不明の場合はなかなか実用が難しい感じですね..
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問