LoginSignup
5
2

More than 3 years have passed since last update.

Chrome version 80 以降 grid-layout の 1fr の挙動が変わります

Last updated at Posted at 2020-02-11

TL;DR

Chrome 80 以降は grid 項目に最小値が設定されていないと、表示崩れが発生する場合があります。
具体的には grid-template-columns 等に 1fr を指定している箇所が影響します。

回避方法: 下記のように、minmax を用いて最小値を設定してください

Before


grid-template-columns: 1fr auto 1fr;

After

grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);

参考サイト

詳細はこちらで
https://codepen.io/MadeByMike/full/LYVYXbv

5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
2