CSS パネル レイアウト プロパティ: グリッドおよびグリッド テンプレート列

CSS パネル レイアウト プロパティ: グリッドとグリッド テンプレート列

現代の Web ページ レイアウトでは、パネル レイアウトは Web コンテンツを統合できる一般的な設計方法です。グリッド形式。パネルレイアウトを実現するには、CSSのグリッドレイアウト属性とgrid-template-columns属性が鍵となります。

1. グリッド レイアウト属性の概要

グリッド レイアウト属性は、CSS でグリッド レイアウトを作成するために使用されるプロパティで、HTML 要素をグリッドに分割することで、複雑なレイアウト構造を簡単に構築できます。 。グリッド レイアウトを使用すると、列レイアウトを実現できるだけでなく、応答性の高いレイアウトを実現し、強力な位置合わせおよびサイズ変更機能も実現できます。

2.grid-template-columns 属性の詳細説明

grid-template-columns 属性は、グリッドの数と列幅を定義するために使用されます。 Grid-template-columns の値を設定することで、グリッドのレイアウトを迅速かつ柔軟に調整できます。

次に、よく使用されるグリッド テンプレート列のコード例をいくつか示します。

1. 偶数列レイアウト:

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

上記のコードは、.grid-コンテナ要素は 3 つの列に分割され、各列の幅は均等に分割されます。

2. 指定された列幅を設定します:

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

上記のコードは、.grid-container 要素を 3 つの列に分割し、最初の列の幅は 200 ピクセルです。 2 番目の列が残りを占めます。スペースのスケールは 1、列 3 の幅は 300 ピクセルです。

3. グリッド線を使用して区切ります:

.grid-container {
  display: grid;
  grid-template-columns: [col1-start] 200px [col2-start] 1fr [col2-end col3-start] 300px [col3-end];
}

上記のコードでは、角括弧を使用してグリッド線の名前を指定しています。これらの名前はレイアウトで使用できます。そしてポジショニング。

3. パネル レイアウトでのグリッド レイアウト属性の適用

グリッド レイアウト属性と Grid-template-columns 属性は、パネル レイアウトを実装するための強力なツールです。パネルを列に分割し、異なる幅を設定することで、グリッド レイアウトの効果を簡単に実現できます。

以下は、特定のパネル レイアウト コードの例です:

.panel-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}

.panel {
  background-color: #f2f2f2;
  padding: 20px;
}

上記のコードでは、.panel-container 要素は 2 つの列に分割されており、各列の幅の比率は 1 です。 2.同時に、gap 属性を設定することにより、列間の間隔が 20 ピクセルに定義されます。

次に、2 つのサブ要素 .panel を .panel-container 要素に追加します。これらはパネルのコンテンツとして表示されます。

<div class="panel-container">
  <div class="panel">
    内容 1
  </div>
  <div class="panel">
    内容 2
  </div>
</div>

このレイアウトを使用すると、.panel-container 要素をすぐに作成できます。 2 つのパネル 2 つのパネルからなるページ。各パネルの幅の比率は 1:2 で、より美しい外観になっています。

概要:

CSS の Grid Layout 属性と Grid-template-columns 属性は、複雑なグリッド レイアウトを簡単に実装できる強力な機能を提供します。パネル レイアウトでは、grid-template-columns 属性を設定することで、パネルの数と列幅を柔軟に制御して、さまざまなレイアウト効果を実現できます。列レイアウト、レスポンシブ レイアウト、その他の複雑なレイアウト構造であっても、グリッド レイアウト属性で簡単に処理できます。

以上がCSS パネル レイアウト プロパティ: グリッドおよびグリッド テンプレート列の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。