CSS グリッドとフレックスボックス: 列の作成にはどちらが適していますか?

.flex-container { 
  display: flex; 
} 

.flex-container { 
  display: flex; 
  flex-wrap: wrap; 
} 

この CSS を使用して:

.grid-container { 
  display: grid; 
} 

Grid のデフォルトの動作では互いに積み重ねられた行が作成されるため、上記の宣言だけでは何も起こりません。

列表示に切り替えるには、 グリッド自動フロー プロパティ（つまり 行 デフォルト):

.grid-container { 
  display: grid; 
  grid-auto-flow: column; 
} 

結果は次のとおりです。

各行に必要な正確な列数を指定するには、次を使用します。 グリッドテンプレート列 :

.grid-container { 
  display: grid; 
  grid-template-columns: repeat(5, 1fr); 
} 

この値により、5 つの等しい幅の列が作成されます。 Flexbox と同様のラッピング動作を実現するには、次のような応答性のプロパティを使用できます。 自動フィット そして 最小-最大 :

.grid-container { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, min-max(300px, 1fr)); 
} 

フレックスボックスとグリッドがそれぞれ 1 次元と 2 次元であるとよく言われます。ただし、これがすべての真実ではありません。Flexbox と Grid はどちらも 2次元レイアウトシステム 。彼らは、異なる制約の下で、異なる方法でそれを行うだけです。

最も重要なのは、レイアウトの一次元の側面を制御する方法です。たとえば、次の画像を考えてみましょう。

グリッド列の一貫性と、フレックスボックス内の各列がどの程度不均一であるかを観察します。フレックス コンテナ内の各行/列は、互いに独立しています。したがって、コンテンツのサイズによっては、他のものよりも大きいものもあります。これらは列ではなく、独立したブロックに似ています。

デフォルトで列がロックされた 2D グリッドを設定することで、グリッドの動作が異なります。上の画像が示すように、短いテキストが含まれる列は、より長いテキストが含まれる列と同じサイズになります。

要約すると、CSS Grid はもう少し構造化されており、Flexbox はより構造化されています。 柔軟で応答性の高いレイアウト システム 。これらの代替レイアウト システムには、適切な名前が付けられています。

フレックスボックスを使用する場合

内容によって定義されている、各列/行の固有のサイズ設定に依存したいですか?それとも、親の観点から構造化された管理を行いたいですか?あなたの答えが最初であれば、Flexbox が最適なソリューションです。

これを実証するために、水平ナビゲーション メニューを考えてみましょう。内のマークアップを置き換えます <本文> これを含むタグ:

<h1>Flexbox vs. Grid</h1> 
 
<header class="flex"> 
  <h2>Flexbox</h2> 
 
  <nav> 
    <ul class="nav-list"> 
      <li><a href="">Home</a></li> 
      <li><a href="">About Us</a></li> 
      <li><a href="">Service Information Goes Here</a></li> 
      <li><a href="">Blog Contact</a></li> 
      <li><a href=""></a></li> 
    </ul> 
  </nav> 
</header> 
 
<header class="grid"> 
  <h2>Grid</h2> 
 
  <nav> 
    <ul class="nav-list"> 
      <li><a href="">Home</a></li> 
      <li><a href="">About Us</a></li> 
      <li><a href="">Service Information Goes Here</a></li> 
      <li><a href="">Blog Contact</a></li> 
      <li><a href=""></a></li> 
    </ul> 
  </nav> 
</header> 

CSS ファイル内のマークアップを次のように置き換えます。

.nav-list { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
} 
 
header { 
  --border-width: 5px; 
  border: var(--border-width) solid black; 
  margin-bottom: 30px; 
} 
 
header > *:first-child { 
  border: var(--border-width) solid #FFC0CB; 
  margin: 0; 
} 
 
li { 
  border: var(--border-width) solid #90EE90; 
} 

結果は次のとおりです。

無料で音楽をダウンロードするウェブサイト

次に、次の CSS を追加して、最初のナビゲーションをフレックス レイアウトに変換し、2 番目のナビゲーションをグリッド レイアウトに変換します。

.flex .nav-list { 
  display: flex; 
  gap: 1em; 
  flex-wrap: wrap; 
} 
 
.grid .nav-list { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
} 

結果を比較して、どちらがより適切であるかを確認します。

上の画像から、この場合には Flexbox が最適なソリューションであることがわかります。互いに並べて配置し、固有のサイズ (テキストの長さに応じて大きくまたは小さく) を維持したい項目があるとします。グリッドでは、各セルの幅は固定されており、少なくともプレーン テキスト リンクでは見栄えが良くありません。

CSS グリッドを使用する場合

Grid が特に優れているのは、親から厳格なシステムを作成する場合です。例としては、異なる量のコンテンツが含まれている場合でも、同じ幅にする必要がある一連のカード要素があります。

内のマークアップを置き換えます <本文> これを含むタグ:

<h1>Flexbox vs. Grids</h1> 
 
<section class="cards"> 
  <h2>Some cards</h2> 
 
  <div class="columns"> 
    <article class="card"> 
      <h3 class="card__title">Fun Stuff</h3> 
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p> 
 
      <ul> 
        <li>Lorem</li> 
        <li>Ipsum</li> 
        <li>Excavate</li> 
      </ul> 
    </article> 
 
    <article class="card"> 
      <h3 class="card__title">Fun Stuff</h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
      <ul> 
        <li>Lorem</li> 
        <li>Ipsum</li> 
        <li>Excavate</li> 
      </ul> 
    </article> 
 
    <article class="card"> 
      <h3 class="card__title">A Longer Title Than Others</h3> 
 
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere 
         excepturi sit ea dolores totam veniam qui voluptates commodi, 
         perferendis et!</p> 
 
      <ul> 
        <li>Lorem</li> 
        <li>Ipsum</li> 
        <li>Excavate</li> 
      </ul> 
    </article> 
  </div> 
</section> 

次の CSS を追加します。

.columns { 
  display: flex; 
  gap: 1em; 
} 
 
article { 
  background-color: #90EE90; 
  color: black; 
  padding: 15px; 
} 
 
ul { 
  background-color: white; 
  padding: 2px; 
  list-style: none; 
} 

Flexbox 表示から始めてどのように見えるかを確認し、グリッド表示と比較します。出力は次のとおりです。

Flexbox が適切に処理する固有のサイズ設定により、最後の列が他の列よりも大きくなっていることに注目してください。ただし、Flexbox を使用してそれらを同じ幅にするには、次のコードを追加して、その本質的なサイズ設定に反する必要があります。

.columns > * { 
  flex: 1; 
} 

これでうまくいきます。ただし、このような場合には Grid の方が適しています。列の数を指定するだけで準備完了です。

.columns { 
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  gap: 1em; 
} 

結果は次のとおりです。

グリッドを使用するもう 1 つの利点は、親が子のレイアウトを制御できることです。そのため、レイアウトを壊すことを心配することなく、子要素を追加および削除できます。

Androidに絵文字を追加する方法

では、いつグリッドまたはフレックスボックスを使用すべきでしょうか?

要約すると、CSS グリッドは、個々のコンテンツのサイズに関係なく、列のサイズが等しい、親の観点から構造化されたコントロールが必要な場合に最適です。

一方、Flexbox は、要素の固有のサイズ設定に基づいて、より柔軟なシステムが必要な場合に最適です。