CSS のグリッド レイアウトとフレックス レイアウト

導入

• FlexBox とグリッド レイアウトはどちらも強力なレイアウトです。

フレックスボックス:

• Flexbox は 1 次元のレイアウト モデルであり、要素を 1 行または 1 列に配置するのに最適です。
• フレックスボックスは、要素のサイズやコンテナのサイズが不明な場合に特に便利です。
• アイテムを水平方向と垂直方向の両方に整列させるのに最適で、ナビゲーション バー、サイドバー、ツールバーの作成に非常に役立ちます。

CSS グリッド:

• グリッドは 2 次元のレイアウト モデルであり、要素を行と列に同時に配置するのに最適です。
• 複雑なレイアウトの作成に最適で、列と行の両方を同時に処理できるため、複雑なページ レイアウトを構築する場合に適しています。

グリッドレイアウトの詳細

grid-template-columns: repeat(3, 1fr);
grid-template-row: repeat(3, auto);
grid-column: 1/3
grid-row: 1/4

行のオーバーライド

• repeat(3, minmax(200px, 1fr)) ステートメントは、最小サイズが 200px、最大サイズが 1fr の 3 つの行 (または、使用場所に応じて列) を作成します。
• 1fr 単位は、グリッド コンテナー内の使用可能なスペースの一部を表します。したがって、コンテナーのサイズがすべての行の合計最小サイズ (この場合は 600px) を超える場合、残りのスペースは行間で均等に分配されます。

repeat(3, minmax(200px 1fr))

自動フィットと自動入力

CSS グリッドの auto-fill および auto-fit キーワードは、グリッド項目がグリッド コンテナー内で余分なスペースを占有しない場合のグリッドの動作を制御します。

自動入力

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

この例では、グリッドはコンテナに収まる限り多くの 100 ピクセルの列を作成します。 スペースが残っている場合は、列に均等に分配されます。

自動フィット:

• このキーワードは、グリッドにできるだけ多くのトラックを作成するように指示しますが、空のトラックは折りたたまれるため、グリッドの最後には空のトラックは存在しません。

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

この例では、グリッドはコンテナに収まる限り多くの 100 ピクセルの列を作成します。 スペースが残っている場合、それは列に均等に分配され、空の列は折りたたまれます。

サブグリッド

• CSS グリッド レイアウトのサブグリッド値は、グリッド項目をグリッド コンテナーにして親グリッドと揃える場合に使用されます。

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

.item {
  display: grid;
  grid-template-columns: subgrid;
}

注:-

• これは、ネストされたグリッドを親グリッドと揃えたい場合に便利です。
• ただし、サブグリッドはすべてのブラウザで広くサポートされているわけではありません。

コンテナクエリ

1. コンテナサイズのクエリ

• 幅メディアクエリはビューポートの幅を考慮します ただし、コンテナ サイズのクエリではコンテナの幅が考慮されます。コンテナはクエリの対象となる要素です。

ルール:-

• 実際にはコンテナの子孫のみを含むルールコンテナ自体ではありません

• コンテナ サイズ クエリはレスポンシブ デザインへの追加であり、メディア クエリに代わるものではありません。
  

<article class="card">
    <h2>That's No Moon. It's a Space Station.</h2>
    <p class="text">At 198km diameter, Mimas is bigger than the first Death Star (120km) but smaller than the second (800km). </p>
    <p class="link"><a href="https://science.nasa.gov/saturn/moons/mimas/" target="_blank" class="button">More about Mimas</a></p>
  </article>

<!-- we can't query cards in container query so only work with descendants-->
<!-- Workaround solution would be check below-->
<div class="card">
<article >
    <h2>That's No Moon. It's a Space Station.</h2>
    <p class="text">At 198km diameter, Mimas is bigger than the first Death Star (120km) but smaller than the second (800km). </p>
    <p class="link"><a href="https://science.nasa.gov/saturn/moons/mimas/" target="_blank" class="button">More about Mimas</a></p>
  </article>
</div>

.card {
  container-name: card;
  container-type: inline-size;
}

@container card (min-width: 200px) {
  article {
    background-color: red;
  }
}

@container card (min-width: 250px) {
  article {
    ...
  }
}

以上がCSS のグリッド レイアウトとフレックス レイアウトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。