一次元か二次元か
Flexboxは行か列の一方向に並べるのが得意で、ボタンの列やヘッダーに向いています。Gridは行と列を同時に扱えるため、カード一覧のような面のレイアウトに向いています。
メディアクエリなしで列数を変える
repeat(auto-fill,minmax(200px,1fr))と書くと、幅に応じて列数が自動で変わります。auto-fitは余った列を詰めて広げ、auto-fillは空の列を残す、という違いがあります。
はみ出しを防ぐmin-width:0
GridやFlexの子要素は、中身の幅より小さくならない場合があります。長い文字列ではみ出すときは、min-width:0やoverflowを指定します。文字サイズにはclamp(最小,推奨,最大)を使うと、画面幅に合わせて滑らかに変えられます。