Webデザインで横並びのレイアウトを作るとき、CSSの display: flex; や display: grid; が非常に便利です。
本記事では、flexとgridの使い分けや基本的なプロパティをわかりやすく解説し、実際のコーディングでの活用方法を紹介します。
今回は、CSSのflexとgridを使った横並びレイアウトを徹底解説します。
flexとgridの違い
CSSのflexとgridは、レイアウト作成に適したdisplayプロパティですが、それぞれ適した用途が異なります。
– display : flex
1次元のレイアウトに最適です。アイテムを横一列、または縦一列に並べる際に使います。
– display : grid
2次元のレイアウトに適しています。アイテムを行と列の両方で配置したい場合に便利です。
flexで横並びレイアウトを作成する方法
まずは、display: flex; を使った横並びレイアウトの基本から解説します。
See the Pen Untitled by 小林祐也 (@ulfntssw-the-animator) on CodePen.
各要素に flex: 1; を指定すると、全てのアイテムが均等な幅で表示されます。
上記コードでは.textに対してのみ「flex: 1;」指定しているので、boxの可能幅いっぱいに長さが広がります。
「gap:20px;」を.boxに指定することで、.box直下のアイテム間にスペースが入った横並びレイアウトが簡単に実現できます。
gridで横並びレイアウトを作成する方法
次に、display: grid; を使ったレイアウトを見てみましょう。gridは2次元レイアウトを柔軟に制御でき、複雑なデザインにも対応可能です。
See the Pen Gridを使用して横並びのレイアウトを作る方法 by 小林祐也 (@ulfntssw-the-animator) on CodePen.
gridは細かくレイアウトの条件を指定することが可能です。以下はそのCSSの一部となります。(各プロパティの設定値は初期値を表示しています)
grid-template-rows:none
コンテンツ内での高さの指定ができます。grid-template-columns:none
コンテンツ内での幅のレイアウトの指定ができます。
例 ）: 1fr 40px 1fr; と指定した場合、中央に40px、両サイドに残りの幅を等分したレイアウトが追加されます。grid-template-areas:none
グリッドに名前を割り当てることにより、名前付きの グリッド領域 を指定できます。
参考URLはこちらgrid-auto-rows:auto
指定されたパーセント値または絶対的な長さを縦に設定できます。grid-auto-columns:auto
指定されたパーセント値または絶対的な長さを横に指定できます。grid-auto-flow:row
自動配置のアルゴリズムの動作を制御し、自動配置されたアイテムがどのようにグリッドに流れ込むかを正確に指定するものです。
参考URLはこちらcolumn-gap:normal
横に対してアイテム間のスペースを設定できます。row-gap:normal
縦の対してアイテム間のスペースを設定できます。grid-column-gap:0
横に対してアイテム間のスペースを設定できます。
※グリッドレイアウト専用（※他のレイアウトには使用できません）grid-row-gap:0
縦の対してアイテム間のスペースを設定できます。
※グリッドレイアウト専用（※他のレイアウトには使用できません）
この設定で、各列の間に20pxのスペースができます。
flexとgridを使い分けるポイント
どちらも横並びレイアウトに適していますが、以下のように使い分けるのがおすすめです。
- flex：
シンプルな横並びレイアウトや、要素を順番に並べたい場合に最適。 - grid：
複雑なレイアウトや、行と列で要素を配置したい場合に向いています。
例えば、ナビゲーションバーのようにシンプルに横並びにするだけなら flex、ブログのギャラリーのように複数列のレイアウトを作りたい場合は grid が最適です。
まとめ：flexとgridで理想のレイアウトを実現しよう
CSSのflexとgridは、シンプルな横並びから複雑なレイアウトまで幅広く対応できる強力なツールです。
シンプルに1列のみを横並びにする場合はflex、行と列の配置が必要な場合はgridを使うことで、意図したレイアウトを効率よく作成できます。
CSSのレイアウト力を最大限に活用し、洗練されたビジュアルと使いやすさを両立したデザインにチャレンジしてみてください。
以上、CSSのflexとgridを使った横並びレイアウトの使い方について解説しました。
小林祐也
2024.11.13