HTML チュートリアル: アダプティブ グリッド自動レイアウトにグリッド レイアウトを使用する方法

HTML チュートリアル: アダプティブ グリッド自動レイアウトにグリッド レイアウトを使用する方法。特定のコード サンプルが必要です。

1. グリッド レイアウトの基本概念を理解する

1. グリッド コンテナ (グリッド コンテナ): グリッド レイアウトの親要素として設定され、グリッド レイアウトを使用するには、表示属性の値を Grid または inline-grid に設定します。グリッド コンテナーには、複数のグリッド アイテム (グリッド アイテム) を含めることができます。
2. グリッド項目: グリッド コンテナの直接の子要素。グリッド コンテナのセルに配置され、行と列の数とサイズを定義することで位置を制御します。

2. グリッド レイアウトを使用してアダプティブ グリッド自動レイアウトを実装する

1. 
   グリッド コンテナーの作成
まず、グリッド コンテナーを作成する必要があります。これは、HTML で要素をグリッド コンテナとして設定することで実現できます。たとえば、div 要素をグリッド コンテナとして設定できます。

  
1
 
2
 
3
 
4
 
5
 
6
 

ログイン後にコピー
2. 
   グリッド レイアウトと行と列の数を設定する
CSS で、グリッド コンテナーの表示属性の値を Grid に設定し、渡すことでグリッド レイアウトを有効にできます。 Grid- template-rows プロパティと Grid-template-columns プロパティは、行と列の数とサイズを定義します。

.grid-container { display: grid; grid-template-rows: repeat(2, 1fr); /* 定义两行，每行占满剩余空间 */ grid-template-columns: repeat(3, 1fr); /* 定义三列，每列占满剩余空间 */ }

ログイン後にコピー
3. 
   グリッド項目の位置とレイアウトの制御
グリッド項目のグリッド行プロパティとグリッド列プロパティを設定することにより、グリッド コンテナー内での位置を制御できます。次のコード例では、最初の 3 つのグリッド アイテムを 1 行目に配置し、最後の 3 つのグリッド アイテムを 2 行目に配置します。

.grid-container div:nth-child(1) { grid-row: 1; grid-column: 1; } .grid-container div:nth-child(2) { grid-row: 1; grid-column: 2; } .grid-container div:nth-child(3) { grid-row: 1; grid-column: 3; } .grid-container div:nth-child(4) { grid-row: 2; grid-column: 1; } .grid-container div:nth-child(5) { grid-row: 2; grid-column: 2; } .grid-container div:nth-child(6) { grid-row: 2; grid-column: 3; }

3. 概要

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