FlexboxやCSS Gridによるレイアウトの崩れ、テキストが長いコンテンツ、固定の幅・固定の高さによるレイアウトの崩れ、子アイテムが増えすぎたり減りすぎたりで崩れたりなど、起こりがちな問題を解決する実践的なテクニックが満載です。

• Flexboxでの折り返し：コンテナに十分なスペースがないと、横スクロールが発生する。スクロールするラッパーを必要としない限り、flex-wrapを使用してラッピングを許可する。
• スペースの確保：一見必要がないように見えるスペースも、実装に追加する必要。
• テキストが長いコンテンツ：テキストが長いコンテンツを考慮することは、レイアウトを構築する上で重要。一貫性が重要な場合は、text-overflowとその仲間を使用して、テキストを切り捨てる。
• 画像の伸縮を防止する：ページ上で画像のアスペクト比を制御できない場合、ユーザーがアスペクト比に合わない画像をアップロードしたときの解決策を前もって実装しておくため、CSSのobject-fitを使用する。
• スクロールが連鎖するのを回避：scroll chaining（スクロールの連鎖）を回避するため、CSSのoverscroll-behaviorプロパティを使う。スクロールが必要なコンポーネント（モーダル・チャットコンポーネント・スマホのメニューなど）にこの機能を追加しておく。
• CSS変数のフォールバック：何らかの理由でCSS変数の値が空だった場合に備えて、エクスペリエンスを損なわない方法でそれらを使用するために適用できる方法がある。var()にフォールバック値を追加しておく。
• 固定の幅・固定の高さによるレイアウトの崩れ：高さが固定されたヒーローセクションでコンテンツがはみ出ないようにするには、heightの代わりにmin-heightを使用する。ボタンを固定幅で使用していると、ラベルが端に寄ったりはみ出したりする。これを修正するには、widthの代わりにmin-widthを使用する。
• 忘れがちな背景の繰り返し：大きな画像を背景として使用する場合、大きなスクリーンでの表示を考慮することを忘れがち。背景はデフォルトで繰り返される。必ずbackground-repeatをリセット。
• 垂直のメディアクエリ：たとえばposition: sticky;を追加してサイドバー内のセカンダリリンクをasideセクションの一番下に配置すると、ブラウザの高さが小さくなった時にリンクが重なってしまう。メディアクエリを垂直で使用して、ビューポートが一定の高さの場合のみstickyさせる。
• justify-content: space-between; を使用する：flexコンテナでは、justify-contentを使って子アイテム間のスペースを空けると、子アイテムの数が一定以下の場合にレイアウトが崩れる。簡単な方法は、gapに変更すること。
• 画像の上にテキストを配置：画像の読み込みに失敗した場合を考慮することが重要。要素に背景色を用意しておくことで、簡単に解決。
• CSS Gridで固定値を使用する際の注意点：小さなビューポートサイズではスペースがないため、レイアウトが崩れてしまう。必ずメディアクエリを使用する。
• 必要な場合のみスクロールバーを表示する：長いコンテンツがある場合に限り、スクロールバーを表示するかどうかを制御するため、overflowプロパティの値としてautoを使用する。
• スクロールバーのガター：コンテンツが長くなったときにスクロールバーをつけるとレイアウトがずれてしまうので、scrollbar-gutterプロパティを使用する。
• CSS Flexboxにおけるコンテンツの最小サイズ：flexアイテムに、アイテム自身よりも大きなテキストや画像がある場合、ブラウザはテキストや画像を縮小されない。この問題を解決するには、flexアイテムのmin-widthを0にする必要。
• CSS Gridにおけるコンテンツの最小サイズ：gridアイテムより大きな要素がある場合、その要素はオーバーフローする。防御的なCSSとしては、minmax()関数を使用する。
• auto-fitとauto-fillの使い分け：CSS Gridでminmax()関数を使用する場合、auto-fitとauto-fillのどちらのキーワードを使用するかを決めることが重要。auto-fitは利用可能なスペースを埋めるためにgirdアイテムを拡張する。auto-fillはgirdアイテムの幅を変更せずに、利用可能なスペースを確保したまま。もしgirdアイテムが1つだけでauto-fitが使用されている場合、アイテムはコンテナの幅いっぱいに拡張されてしまうので、auto-fillを使用する方が良い。
• 画像の最大幅：基本的に、すべての画像にmax-width: 100%;を設定する。使用するCSSリセットに追加しておく。
• CSS Gridでposition: sticky;が効かないとき：girdアイテムのデフォルトのビヘイビアは、stretch。このデフォルトにより、aside要素はmain要素と同じ高さになるが、その結果position: sticky;が機能しなくなる。期待どおりに機能させるには、align-selfプロパティをリセットする必要。
• セレクタのグルーピング：異なるブラウザで動作するように意図されたセレクタをグループ化することは推奨されない。セレクタをグループ化すると、w3cによれば、ルール全体が無効。リスト内に無効なセレクタがある場合、リスト全体が無効。