𝗖𝗦𝗦 𝗚𝗿𝗶𝗱 𝘃𝘀 𝗙𝗹𝗲𝘅𝗯𝗼𝘅
CSSレイアウトとの格闘はやめましょう。
以前の私は、Flexboxで崩れたレイアウトを修正するために何時間も費やしていました。アイテムを一行に並べようとしても、最後のアイテムが画面全体に広がってしまうことがありました。見た目も不自然でした。マージンを調整したり、さまざまなハックを試したりしましたが、どれも上手くいきませんでした。
その後、考え方をCSS Gridに切り替えました。
その違いはシンプルです：
- Flexboxは1次元のレイアウト用です。単一の行、または単一の列に使用します。
- CSS Gridは2次元のレイアウト用です。行と列の両方を同時に制御する必要がある場合に使用します。
Flexboxは「小さなタスクのためのツール」、Gridは「ページ全体の構造を作るためのツール」と考えてください。
Flexboxの罠： ギャラリーにFlexboxを使用すると、画面サイズによってアイテムが完璧に整列しないことがあります。デザインのリズムを崩す「孤立した（orphan）」アイテムができてしまうことがよくあります。
Gridによる解決策： Gridを使えば、わずか一行のコードでレスポンシブなギャラリーを作成できます。
これを使用してください：
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
これは、ブラウザに対して「可能な限り多くの250pxの列を詰め込む」よう指示するものです。計算はブラウザが自動で行ってくれます。もう推測する必要も、行が崩れることもありません。
ダッシュボードの例： サイドバー、メインコンテンツ、フッターを持つダッシュボードをFlexboxで作るのは大変です。フッターを全幅に広げるために、入れ子になったコンテナや複雑なコードが必要になることがよくあります。
Gridなら、トラックを一度定義するだけです：
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
わずか一つのコマンドで、フッターを最初の列から最後の列まで広げることができます。コードはクリーンで読みやすくなります。
私からのアドバイス：
• ヘッダーやボタン内の単純な整列にはFlexboxを使用する。
• メインのページレイアウトや複雑なギャラリーにはGridを使用する。
• レイアウトの問題を解決するためだけに、コンテナを入れ子にするのはやめる。
• スペースを簡単に分配するために fr 単位を使用する。
今日、ぜひ試してみてください。以前Flexboxで作った古いコンポーネントを取り出し、CSS Gridで書き直してみるのです。コードが短くなり、レイアウトがより強固になるのを実感できるはずです。