web-dev-qa-db-ja.com

CSSグリッドレイアウトがプレフィックスがあってもIE11で機能しない

グリッドに次のHTMLマークアップを使用しています。

<section class="grid">
    <article class="grid-item width-2x height-2x">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item width-2x">....</article>
    <article class="grid-item height-2x">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item width-2x height-2x">....</article>
</section>

SCSSコードは次のようなものです。

.grid {
    display: grid;
    grid-template-columns: repeat( 4, 1fr );
    grid-gap: 30px;
    align-items: start;

    .grid-item {
        &.height-2x {
            grid-row: span 2;
        }
        &.width-2x {
            grid-column: span 2;
        }
    }
}

ワークフローで自動プレフィックスを使用しているため、-msプレフィックスを持つすべての関連プロパティが自動的に追加されます。 inspect要素で確認できます。

現在、問題はこのコードがChrome、Firefox、Operaで正常に機能することですが、Microsoft EdgeまたはIE 11でこのページを開くと、最初のセルですべてのグリッドアイテムが重なり合っています。 このサイト によれば、これらのブラウザは-msプレフィックスのCSSグリッドレイアウトをサポートしています。このシナリオのCodePenを作成しました。

CodePenリンク

なぜ機能しないのですか？

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr);
  -ms-grid-rows: (270px)[4];
  grid-template-rows: repeat(4, 270px);
  grid-gap: 30px;
}

.grid .grid-item {
  background-color: #000;
  color: #fff;
  text-align: center;
  line-height: 270px;
}

.grid .grid-item.height-2x {
  -ms-grid-row: span 2;
  grid-row: span 2;
}

.grid .grid-item.width-2x {
  -ms-grid-column: span 2;
  grid-column: span 2;
}
<section class="grid">
  <article class="grid-item width-2x height-2x">....</article>
  <article class="grid-item">....</article>
  <article class="grid-item">....</article>
  <article class="grid-item width-2x">....</article>
  <article class="grid-item height-2x">....</article>
  <article class="grid-item">....</article>
  <article class="grid-item">....</article>
  <article class="grid-item width-2x height-2x">....</article>
</section>
htmlcssinternet-explorer-11css-grid
47
Faisal Khurshid

IE11は Grid仕様の古いバージョン を使用します。

使用しているプロパティは、古いグリッド仕様には存在しません。プレフィックスを使用しても違いはありません。

すぐにわかる3つの問題を次に示します。

repeat()

repeat()関数は古い仕様には存在しないため、IE11ではサポートされていません。

この投稿に対する別の回答 で説明されている正しい構文を使用するか、すべての行と列の長さを宣言する必要があります。

の代わりに：

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: repeat( 4, 1fr );
      grid-template-columns: repeat( 4, 1fr );
  -ms-grid-rows: repeat( 4, 270px );
      grid-template-rows: repeat( 4, 270px );
  grid-gap: 30px;
}

つかいます：

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;             /* adjusted */
      grid-template-columns:  repeat( 4, 1fr );
  -ms-grid-rows: 270px 270px 270px 270px;        /* adjusted */
      grid-template-rows: repeat( 4, 270px );
  grid-gap: 30px;
}

古い仕様リファレンス： https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-repeating-columns-and-rows

span

spanキーワードは古い仕様には存在しないため、IE11ではサポートされていません。これらのブラウザには同等のプロパティを使用する必要があります。

の代わりに：

.grid .grid-item.height-2x {
  -ms-grid-row: span 2;
      grid-row: span 2;
}
.grid .grid-item.width-2x {
  -ms-grid-column: span 2;
      grid-column: span 2;
}

つかいます：

.grid .grid-item.height-2x {
  -ms-grid-row-span: 2;          /* adjusted */
      grid-row: span 2;
}
.grid .grid-item.width-2x {
  -ms-grid-column-span: 2;       /* adjusted */
      grid-column: span 2;
}

古い仕様リファレンス： https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-row-span-and-grid-column-span

grid-gap

grid-gapプロパティとその長形式grid-column-gapおよびgrid-row-gapは、古い仕様には存在しないため、IE11ではサポートされていません。ボックスを区切る別の方法を見つける必要があります。古い仕様全体を読んだことがないので、方法があるかもしれません。それ以外の場合は、マージンを試してください。

グリッドアイテムの自動配置

グリッドアイテムの自動配置に関する古い仕様の議論 がありましたが、この機能はIE11には実装されていませんでした。 （グリッド項目の自動配置は現在のブラウザで標準になりました）。

したがって、グリッド項目の配置を明確に定義しない限り、それらはセル1,1にスタックされます。

-ms-grid-rowおよび-ms-grid-columnプロパティを使用します。

91
Michael_B

答えはすでにファイサル・クルシッドとマイケル・Bによって与えられています。
これは、可能な解決策をより明確にするための単なる試みです。

IE11以前の場合、親divでグリッドの古い仕様を有効にする必要があります。ボディまたはここのような「グリッド」は次のようになります。

.grid-parent{display:-ms-grid;}

次に、列や行の量と幅を定義しますそう：

.grid-parent{
  -ms-grid-columns: 1fr 3fr;
  -ms-grid-rows: 4fr;
}

最後に、要素（アイテム）を配置する場所をブラウザに明示的に指示する必要があります。そのようです：

.grid-item-1{
  -ms-grid-column: 1;
  -ms-grid-row: 1;
}

.grid-item-2{
  -ms-grid-column: 2;
  -ms-grid-row: 1;
}
12
leopold

マイケルは非常に包括的な回答を提供しましたが、IEでグリッドをほぼ無痛で使用できるようにするためにまだできることをいくつか指摘したいと思います。

repeat機能がサポートされています

繰り返し機能は引き続き使用できますが、異なる構文の背後に隠れているだけです。 repeat(4, 1fr)と書く代わりに、(1fr)[4]と書く必要があります。それでおしまい。現在の状況については、次の一連の記事を参照してください。 https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/

グリッドギャップのサポート

IEを除くすべてのブラウザでグリッドギャップがサポートされています。したがって、@supports at-ruleを使用して、すべての新しいブラウザーのグリッドギャップを条件付きで設定できます。

例：

.grid {
  display: grid;
}
.item {
  margin-right: 1rem;
  margin-bottom: 1rem;
}
@supports (grid-gap: 1rem) {
  .grid {
    grid-gap: 1rem;
  }
  .item {
    margin-right: 0;
    margin-bottom: 0;
  }
}

少し冗長ですが、プラス面では、IEをサポートするためだけにグリッドを完全に放棄する必要はありません。

Autoprefixerを使用する

私はこれを十分に強調することはできません-グリッドの痛みの半分は、ビルドステップでautoprefixerを使用するだけで解決されます。 CSSを標準に準拠した方法で記述し、autoprefixerにすべての古い仕様のプロパティを自動的に変換させます。 IEをサポートしたくないと判断した場合、browserlist configの1行を変更するだけで、ビルドされたファイルからIE固有のコードがすべて削除されます。

12
kumarharsh

自動配置でIE11をサポートするために、1次元のみでグリッドレイアウトを使用するたびに、gridレイアウトをtableレイアウトに変換しました。 grid-gapの代わりにmarginも使用しました。

結果は同じです。ここでそれを行う方法を参照してください https://jsfiddle.net/hp95z6v1/3/

0
Thomas Webber