ホームページ > 記事 > ウェブフロントエンド > HTML チュートリアル: グリッド レイアウトにグリッド レイアウトを使用する方法
HTML チュートリアル: グリッド レイアウトにグリッド レイアウトを使用する方法。具体的なコード例が必要です。
はじめに:
パート 1: グリッド レイアウトの基本概念
パート 2: グリッド レイアウトを使用して基本的なグリッドを作成する
<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: グリッド レイアウトを使用してレスポンシブ グリッドを作成する
.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: 結論
以上がHTML チュートリアル: グリッド レイアウトにグリッド レイアウトを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。