2021,11,9時点
gap
親要素にgapプロパティを指定することにより、子要素に配置に関するrowとcolumnの余白のプロパティを指定せずに済む。
gap: 8px 10px; marginのショートハンドのように２つ指定するとrowとcolumnの指定が可能
IE・Opera Mini 未対応
edge Firefox Chrome Safari Opera iOS/Safari 一部未対応有りだが最新版は対応
repeat()とauto-fit
repeat()+auto-fit で、余白がある文だけ繰り返してくれる
IE・Opera Mini 未対応
edge Firefox Chrome Safari Opera iOS/Safari 一部未対応有りだが最新版は対応
minmax() + fr
minmax() + fr(単位) 最小値と最大値を指定しつついい感じにしてくれる
IE・Opera Mini 未対応
edge Firefox Chrome Safari Opera iOS/Safari 一部未対応有りだが最新版は対応
aspect-ratio
アスペクト比（横と縦の長さの比率）をこれで指定できる
IE・Opera Mini 未対応
edge Firefox Chrome Safari Opera iOS/Safari 一部未対応有りだが最新版は対応
clamp()
推奨値(width)とともに最小値(min-width)と最大値(max-width)をまとめて指定できる
IE・Opera Mini 未対応
edge Firefox Chrome Safari Opera iOS/Safari 一部未対応有りだが最新版は対応
:where()
!importantの殴り合いを回避しつつ、詳細度を上げずに指定できる
IE・Opera Mini 未対応
edge Firefox Chrome Safari Opera iOS/Safari 一部未対応有りだが最新版は対応
参照ページ：
https://qiita.com/xrxoxcxox/items/3e2e84143d7e70e8580d
https://caniuse.com/
↧