Flexbox と CSS グリッドを組み合わせて効率的なレイアウトを実現する方法

公開: 2023-02-12

編集者注: このゲスト投稿は、UX ソフトウェア エンジニア兼 Web デザイナーであり、コード作成の芸術を愛する Abbey Fitzgerald によって書かれました。

これまで、CSS float プロパティは、Web サイトで要素を配置するための主要な方法の 1 つでした。 この方法で作業したことがある場合は、複雑なレイアウトには常に理想的であるとは限らないことをご存知でしょう。 幸いなことに、Web デザインの現代では、Flexbox と CSS グリッドのおかげで、要素の配置がはるかに合理化されています。

Flexbox が登場すると、位置合わせがはるかに簡単になり、それ以来広く採用されています。 CSS グリッド レイアウトは、Web デザイン コミュニティでも多くの興奮をもたらしました。 少し前に、基本的な CSS グリッド レイアウトを作成する方法を見てきました。 広く採用されているわけではありませんが、ブラウザーはサポートを採用し始めています。 それが完全にサポートされると、これは設計に大きな影響を与えます。 ブラウザのサポートは常に増加しています。 最新情報については、Can I Use を確認してください。

さて、次は何だろうと思っているかもしれません。 結局、Flexbox と CSS グリッド レイアウトは同様の結果を達成しているようです。 ただし、これは Flexbox 対 Grid の議論ではなく、それらを一緒に使用する方法を学ぶことです。 Grid と Flexbox の両方をいじるほど、どちらか一方だけを選択する必要がないことがわかりました。 近い将来、CSS グリッド レイアウトがブラウザーで完全にサポートされるようになると、デザイナーはそれぞれの利点を組み合わせて、最も効率的で興味深いデザインを作成できるようになります。

基本的なフレックスボックスと CSS グリッド レイアウトのテスト

Flexbox と CSS Grid のどちらが開発ワークフローに適しているかを判断するために、どちらか一方のみを使用する標準レイアウトを作成することは、それらがどのように機能するか、およびそれぞれに利点があるかどうかを確認する良い方法です。 ヘッダー、サイドバー、メイン コンテンツ、およびフッターを備えた、非常にシンプルで非常になじみのあるレイアウト タイプから始めます。 このような単純なレイアウトは、さまざまな要素をすばやく配置する方法です。

また、ライブ サイトには変更を加えないでください。 代わりに、無料のローカル WordPress 開発アプリである Local を試してみてください。 今すぐダウンロードしてください！

フレックスボックスでレイアウトを作成する方法

最近、Flexbox カード レイアウトの作成について取り上げました。 この投稿では、特定の CSS 情報とともに Flexbox の仕組みについて詳しく説明しているため、Flexbox の初心者であれば、その仕組みに慣れるのに役立ちます。

フライホイール グリッドによるレイアウトとフレックスボックス レイアウトのスクリーンショット

このチュートリアルでは、次のものを構築します。

Codepen でこれを参照してください。

この基本的なレイアウトでは、Flexbox の主なタスクは次のとおりです。

  • 全幅のヘッダーとフッターを作成する
  • メインコンテンツエリアの横にサイドバーを配置
  • サイドバーとメインコンテンツエリアの正しいサイズ
  • ナビゲーション要素の配置

基本的な HTML 構造

<div class="コンテナ">
        
    <ヘッダー>
        <ナビ>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
        <ボタン></ボタン>
    </header>
    <div class="wrapper">
        <aside class="sidebar">
            <h3></h3>
        </脇>
        <section class="main">
            <h2></h2>
            <p></p>
        </セクション>
    </div><!-- /wrapper -->
    <フッター>
        <h3></h3>
        <p></p>
    </フッター>
</div><! -- /コンテナ -->

フレックスディスプレイの使い方

ヘッダーのスタイリング

外側から始めて、 display: flex;を追加します。 コンテナーへの変換は、Flexbox レイアウトの最初のステップです。 flex-direction は column に設定されているため、すべてのセクションが互いに下に配置されます。

 。容器 {
    表示: フレックス;
    フレックス方向: 列;
}

全幅ヘッダーの作成はdisplay: flex;を使用するとかなり自動化されました。 (ヘッダーはデフォルトでブロックレベルの要素です)。 この宣言により、ナビゲーション要素を簡単に配置できます。

左側のナビゲーションにはロゴと 2 つのメニュー項目があり、右側にはログイン ボタンがあります。 nav はヘッダーにあるため、 justify-content: space-between;を使用します。 ナビゲーションとボタンは自動的に配置されます。

便利な点の 1 つは、テキストの配置がいかに簡単かということです。 ナビゲーションでは、 align-items: baseline;を使用します。 では、すべてのナビゲーション アイテムがテキストのベースラインに揃えられるため、見た目がより均一になります。

フライホイール グリッドとフレックスボックスによるレイアウトの正当化コンテンツのスクリーンショット
 ヘッダ{
    パディング: 15px;
    margin-bottom: 40px;
    表示: フレックス;
    コンテンツの正当化: スペース間の;
}
ヘッダーナビゲーション {
    表示: フレックス;
    整列項目: ベースライン;
    リスト スタイル タイプ: なし。
}

ページ コンテンツのスタイリング

次に、サイドバーとメイン コンテンツ領域があり、この 2 つを含むラッパーがあります。 .wrapperクラスの div にもdisplay: flex;が必要です。 ただし、フレックス方向は上記とは異なります。 サイドバーとコンテンツ領域は積み重ねられずに隣り合っているため、flex-direction は次のようになります。

次に、サイドバーとメイン コンテンツ領域があり、この 2 つを含むラッパーがあります。 .wrapper クラスの div にも display: flex; が必要です。 ただし、フレックス方向は上記とは異なります。 サイドバーとコンテンツ領域は積み上げられているのではなく隣り合っているため、flex-direction は行であり、これは上のコンテナーで行われたこととは逆です。

 .wrapper {
    表示: フレックス;
    フレックス方向: 行;
}
フライホイール グリッドとフレックスボックス コンテンツ領域のスクリーンショットによるレイアウト

メイン セクションとサイドバーのサイズは非常に重要です。より重要な情報がここにあるからです。 メイン コンテンツはサイドバーの 3 倍のサイズにする必要がありますが、これは Flexbox を使用すると非常に簡単です。

 。主要 {
    屈曲: 3;
    マージン右: 60px;
}
.サイドバー {
   フレックス: 1;
}

このコード スニペットでは、省略形を使用しました。 flex 値は flex-grow プロパティ用です。 Flex-Grow は、同じコンテナー内の残りの柔軟なアイテムと比較して、アイテムがどれだけ大きくなるかという点で強力です。

全体として、Flexbox はこの単純なレイアウトを作成するのに非常に効率的でした。 リスト アイテムのスタイルと、ナビゲーションとボタンの間のスペースを制御できることは特に役に立ちました。

CSS グリッド レイアウトを使用してレイアウトを作成する方法

効率をテストするために、次のステップは、CSS グリッドを使用して同じ基本レイアウトを構築することです。 ページ要素はすべて同じで、Flexbox の例と同じように配置されます。

フライホイール グリッドとフレックスボックス CSS グリッド レイアウトのスクリーンショットによるレイアウト

Codepen でこれを参照してください。

グリッド テンプレート エリア

CSS グリッドの便利な点の 1 つは、テンプレート領域を指定できることです。これにより、レイアウトの定義が非常に直感的になります。 このアプローチを採用することで、グリッド上の領域に名前を付け、項目を配置するために参照することができます。 この基本的なレイアウトでは、次の 4 つの項目に名前を付ける必要があります。

  • ヘッダ
  • メインコンテンツ
  • サイドバー
  • フッター

基本的な HTML 構造

<div class="コンテナ">
        
    <ヘッダー>
        <ナビ>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
        <ボタン></ボタン>
    </header>
  
    <aside class="sidebar">
        <h3></h3>
        <ul>
            <li></li>
        	<li></li>
	<li></li>
	<li></li>
	<li></li>
          </ul>
    </脇>
    <section class="main">
        <h2></h2>
        <p></p>
         <p> </p>
  </セクション>
    <フッター>
        <h3></h3>
        <p></p>
    </フッター>
</div>

これらの領域を、グリッド コンテナーで順番に定義します。 また、読みやすくするためにスペースを空けます。

 グリッド テンプレート エリア:
        「ヘッダーヘッダー」
        「サイドバーメイン」
        "フッター フッター";

サイドバーがメインの前にリストされていることに注意してください。 それらを切り替えると、ページ上の順序も変更されます。 現在、サイドバーは左側にあり、メイン コンテンツは右側にありますが、必要に応じて簡単に変更できます。

注意すべき点: これらの名前はスタイリングに「接続」する必要があります。 grid-template-areas が宣言されているからといって、ヘッダーが実際にどこに属しているかはわかりません。 ヘッダー ブロックで、 grid-area: header; 追加する必要があります。

 ヘッダ{
    グリッドエリア: ヘッダー;
    パディング: 20px 0;
    表示: グリッド;
    グリッド テンプレート列: 1fr 1fr;
}

HTML 構造は Flexbox の例と同じですが、CSS はグリッド レイアウトを作成するためにかなり異なります。

 。容器{
    最大幅: 900px;
    背景色: #fff;
    マージン: 0 自動;
    パディング: 0 60px;
    表示: グリッド;
    グリッド テンプレート列: 1fr 3fr;
    グリッド テンプレート エリア:
        「ヘッダーヘッダー」
        「サイドバーメイン」
        "フッター フッター";
    グリッドギャップ: 50px;
}

CSS グリッド レイアウトの使用を開始するには、 display: grid;を用意することが非常に重要です。 コンテナにセット。 grid-template-columns は、ページの全体的な構造を提供するためにここで宣言されています。 Flexbox の例で、 .mainクラスの flex-grow を 3 に設定し、サイドバーの flex-grow を 1 に設定してサイジングを確立したことを覚えていますか? ここでは、grid-template-columns が 1fr および 3fr として設定されています。 これは、分数単位でグリッドが形成されている場所です。 これらの値を使用すると、2 つの列があり、それらの幅が等しくないことが明らかです。 3fr に設定された列は、他の列の 3 倍の幅です。 これは、サイドバーがコンテンツ領域よりも狭く見える理由を説明しています.

フライホイール グリッドによるレイアウトとグリッド スクリーンショットのフレックスボックス基本列

次に、コンテナに使用される fr 単位をヘッダー用に調整する必要があります。 grid-template-columns は 1fr と 1fr に調整されました。 そうすれば、同じサイズの 2 つの列があり、ナビゲーション項目とボタンが収まります。

 ヘッダ{
    グリッドエリア: ヘッダー;
    表示: グリッド;
    グリッド テンプレート列: 1fr 1fr;
}
フライホイール グリッドおよびフレックスボックス レイアウトによるレイアウト グリッド ヘッダーのスクリーンショット

ボタンを配置するには、justify-self を使用して end に設定するだけです。

 ヘッダー ボタン {
    自己正当化: 終わり;
}

ナビゲーションは、必要な場所に配置されます。

 ヘッダー ナビゲーション {
    自己正当化: 開始;
}

コンテンツが中央にあるため、全幅フッターには別の列を設定する必要はありません。

フレックスボックスと CSS グリッドの両方でレイアウトを作成する方法

各メソッドが個別に実行できることを確認したので、次は Flexbox と CSS グリッド レイアウトを組み合わせて、より複雑なものを作成します。

フライホイール グリッドとフレックスボックスを組み合わせたレイアウトによるレイアウト

Codepen でこれを参照してください。

グリッドを動かすための基本的な概要は次のとおりです。

フライホイール グリッドとフレックスボックスを組み合わせたスターターによるレイアウト

Codepen でこれを参照してください。

設計が列と行の両方に依存していることに注目してください。 このレイアウトでは、物事を整列させ、両方向で一貫して動作させる必要があるため、CSS グリッドを使用するとレイアウト全体で効率的です。

フライホイール グリッドとフレックスボックス グリッド スケッチによるレイアウト

このようなレイアウトでは計画が重要です。 最初にスケッチして、文字通り、物事がどのように積み重なっていくかを確認することをお勧めします。 コードを開始するには、display: grid; を使用します。 不可欠です。 これがないと、このタイプのレイアウトを使用しても機能しません。 ここで注意すべきことの 1 つは、コンテンツ ブロック間にスペースがあることです。 これは grid-column-gap と grid-row-gap で達成されました。

 。容器 {
  表示: グリッド;
  グリッド テンプレート列: 0.4fr 0.3fr 0.3fr;
  グリッド列ギャップ: 10px;
  グリッド行ギャップ: 15px;
}

このレイアウトではフラクショナル ユニットが復活し、現在 3 つのエリアが必要です。 最初の値 0.4fr は、2 番目と 3 番目の値 (どちらも 0.3fr) よりもわずかに幅が広くなっています。

列と行のレイアウト

ここで、最初から図を参照することが重要です。 上から、このようにヘッダーが配置されます。 すべての列と 1 つの行にまたがっています。

 .ヘッダー {
  グリッド列開始: 1;
  グリッド列エンド: 4;
  グリッド行開始: 1;
  グリッド行エンド: 2;
  背景色: #d5c9e2;
}

省略形を使用する場合、開始値と終了値は同じ行にあり、スラッシュで区切られます。 次のようになります。

 .ヘッダー {
  グリッド列: 1 / 4;
  グリッド行: 1 / 2;
  背景色: #55d4eb;
}

他のすべてのアイテムを配置するには、適切なグリッドと列の値を CSS に追加するだけです。 ここでそれらを 1 つずつ見ていくのではなく、この例は Codepen にあります。

グリッド レイアウトが構築されたら、次のステップはコンテンツの微調整です。

ナビゲーション

Flexbox は、ヘッダー要素を配置するのに最適です。 基本的なレイアウトの例では、justify-content: space-between でこれに触れています。 グリッドの例には justify-self: start; が必要でした。 ナビゲーションと justify-self: end; ボタンが物を配置するためのものでしたが、フレックスボックスはナビゲーションのためのスペースを簡単にしました。

 .ヘッダー {
  グリッド列: 1 / 4;
  グリッド行: 1 / 2;
  色: #9f9c9c;
  テキスト変換: 大文字;
  ボーダーボトム: 2px ソリッド #b0e0ea;
  パディング: 20px 0;
  表示: フレックス;
  コンテンツの正当化: スペース間の;
  整列項目: センター;
}
フライホイール グリッドとフレックスボックスを組み合わせたメニューのスクリーンショットによるレイアウト

ここでは、これと同じ形式に従います。 ロゴ、メニュー項目、およびボタンは、Flexbox の justify-content を使用して間隔を空けました。

列コンテンツ グリッド

要素を一方向に並べる必要がある場合、つまりより「一次元」である必要がある場合は、通常、Flexbox の方が適しています。 また、Flexbox は要素を動的にスケーリングするのに適しています。 おそらく、 display:flex;を追加して、ボックスの行でこれを試したことがあるでしょう。 親要素の flex プロパティと子要素の flex プロパティ。 この手法を使用すると、きれいな線が形成され、すべての要素が同じ高さになるようにする効率的な方法になります。

テキストとボタンを含む行のコンテンツ

「追加コンテンツ」セクションには、テキストとボタンを備えた 3 つの領域が追加されています。 Flexbox を使用すると、3 列の設定幅を簡単に維持できます。

フライホイール グリッドとフレックスボックスを組み合わせたレイアウト 追加コンテンツのスクリーンショット
 。追加 {
  グリッド列: 2 / 4;
  グリッド行: 4 / 5;
  パディング: 1rem;
  表示: フレックス;
  フレックスラップ: ラップ;
  ボーダー: 1px ソリッド #ececec;
  コンテンツの正当化: スペース間の;
}

1 つの Flexbox 例外

はい、1 次元のレイアウト、グリッド、または列には Flexbox の方が優れていると言いましたが、Flexbox を使用して最新の CSS カード デザイン レイアウトの投稿を作成する方法を読むと、実証された「最後の行」の Flexbox ハックがありました。偶数のカードがなくても、行と列のバランスを保つために。

フライホイール グリッドとフレックスボックスを組み合わせた画像グリッドによるレイアウト
 .関連画像 {
  グリッド列: 1 / 3;
  グリッド行: 5 / 6;
  表示: グリッド;
  グリッド テンプレート列: 繰り返し (4,1fr);
  グリッドギャップ: 1rem;
}
.関連画像.icon {
    背景色: 白;
    フレックス: 1 1 150px;
}

設計アプローチのまとめ

基本的に、私がここで採用したアプローチは、全体的なレイアウト (およびデザインが直線的でないもの) に CSS グリッド レイアウトを利用することでした。 グリッド コンテンツ領域内では、Flexbox を使用して、グリッド領域内のスタイルを順序付けおよび微調整しました。

資力

Flexbox と CSS グリッド レイアウトに関する優れたリソースが数多くありますが、その数は枚挙にいとまがありません。 ここでは、正しい方向に進み、レイアウトにインスピレーションを与えるものをいくつか紹介します。

  • ボックス配置チートシート
  • Jen Simmons のレイアウト ラボ
  • グリッドの完全ガイド
  • フレックスボックスの完全ガイド

これらの演習で、CSS グリッド レイアウトと Flexbox の両方を使用してレイアウトを作成する方法について、より良いアイデアが得られたことを願っています。 これらの新しい技術についてどう思いますか。 それらは開発プロセスにどのように役立ちましたか?