HTML チュートリアル: グリッド レイアウトにグリッド レイアウトを使用する方法

HTML チュートリアル: グリッド レイアウトにグリッド レイアウトを使用する方法。具体的なコード例が必要です。

はじめに:

現代の Web デザインでは、グリッド レイアウトは非常に重要です。一般的で実用的なレイアウト方法。これにより、開発者は Web ページのレイアウトと組版をより柔軟に制御できるようになり、Web ページがより美しく、読みやすくなります。この記事では、HTML でグリッド レイアウトを使用してグリッド レイアウトを行う方法を紹介し、読者がすぐに使い始めるのに役立つ具体的なコード例を示します。

パート 1: グリッド レイアウトの基本概念

グリッド レイアウトは、CSS グリッド レイアウト モジュールによって提供される新しいレイアウト方法です。 Web ページをグリッド セルに分割し、開発者はこれらのグリッド セルに要素を配置できます。グリッド レイアウトには次の基本概念があります:

1. グリッド コンテナ: グリッドのメイン コンテナ要素の表示属性を Grid または inline-grid コンテナに設定することで、グリッドを作成できます。
2. グリッド アイテム: グリッド コンテナー内の各子要素はグリッド アイテムであり、グリッド コンテナーのセルに配置されます。
3. グリッド線: グリッドの水平または垂直の分割線。グリッド項目を配置するために使用できます。
4. グリッド トラック: 2 つの隣接するグリッド線の間の領域。グリッド項目の幅または高さを定義するために使用できます。
5. グリッド セル: 2 つの隣接する水平および垂直グリッド ラインで囲まれた領域。
6. グリッド領域: 4 本のグリッド線で囲まれた長方形の領域。複数のグリッド項目を配置するために使用できます。

パート 2: グリッド レイアウトを使用して基本的なグリッドを作成する

まず、グリッド コンテナーを作成し、子要素をグリッドに配置する必要があります。 HTML 構造は次のように単純です。

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

次に、CSS でグリッド コンテナーのプロパティをいくつか設定して、グリッド レイアウトを実装する必要があります。

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

上記のコードでは、グリッド コンテナの表示属性はグリッドに設定されます。これは、グリッド レイアウトを作成することを意味します。 Grid-template-columns 属性は、グリッド コンテナーの列の数と幅を定義するために使用されます。ここでは、グリッドを 3 つの列に分割し、各列の幅は等しいです。1fr は、均等に分散された幅を示すために使用されます。 Grid-gap 属性はグリッド間のギャップのサイズを定義するために使用されます。ここではギャップを 10px に設定します。

これで、グリッド コンテナーに 4 つのグリッド アイテムを配置し、その位置を指定できます。

.item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

.item1 {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.item2 {
  grid-column: 2 / 4;
  grid-row: 1 / 2;
}

.item3 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.item4 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

上記のコードでは、4 つのグリッド アイテムを定義し、グリッドを介してグリッド内の位置を指定します。 -column プロパティと Grid-row プロパティ。

パート 3: グリッド レイアウトを使用してレスポンシブ グリッドを作成する

基本的なグリッド レイアウトに加えて、グリッド レイアウトはレスポンシブ レイアウトもサポートしています。これにより、グリッドのサイズと解像度に応じてグリッドのレイアウトを自動的に調整できます。スクリーン。 。

たとえば、大きな画面には 3 列のグリッドを表示し、小さな画面には 1 列のグリッドのみを表示できます。コードは次のとおりです。

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

上記のコードでは、grid-template-columns 属性のrepeat() 関数と minmax() 関数を使用して、レスポンシブ レイアウトを実装します。 repeat() 関数はグリッド トラックの定義を繰り返すために使用され、auto-fit はコンテナのサイズに従ってグリッドを自動的に埋めることを意味し、minmax() 関数は各グリッドの最小幅と最大幅を制限するために使用されます。追跡。

パート 4: 結論

グリッド レイアウトを通じて、Web ページのレイアウトと組版をより柔軟に制御し、より美しく読みやすい効果を実現できます。この記事では、グリッド レイアウトの基本概念を紹介し、読者がすぐに使い始めるのに役立つ具体的なコード例を示します。読者が実際の開発でグリッド レイアウトを使用して、優れた Web デザインを作成できることを願っています。 ###

以上がHTML チュートリアル: グリッド レイアウトにグリッド レイアウトを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。