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

Last updated at 2020-11-19Posted at 2020-02-11

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);