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

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

WBOY

リリース： 2023-10-25 08:15:27

オリジナル

1533 人が閲覧しました

CSS 面板布局属性：grid 和 grid-template-columns

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

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

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

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

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

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

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

偶数列レイアウト:

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

ログイン後にコピー

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

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

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

ログイン後にコピー

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

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

.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 サイトの他の関連記事を参照してください。