CSS3 の display:grid、グリッドレイアウトの紹介

1. グリッドレイアウト（グリッド）:

Web ページをグリッドに分割し、さまざまなグリッドを組み合わせてさまざまなレイアウトを作成できます。

2. 基本概念:

コンテナとプロジェクトを図に示します。

    <div class="content">
        <div class="b">1</div>
        <div class="b">2</div>
        <div class="b">3</div>
        <div class="b">4</div>
        <div class="b">5</div>
        <div class="b">6</div>
        <div class="b">7</div>
        <div class="b">8</div>
        <div class="b">9</div>
    </div>

.content はコンテナで、.b はプロジェクトです。

行と列: row: row;

列: 列;

3. コンテナのプロパティ

display:grid; //デフォルトはブロック要素です。

display:inline-grid; //インラインブロック要素

グリッドレイアウトを使用するコンテナーを指定します。

注意: グリッドに設定すると、子要素の float、display: inline-block、display: table-cell、vertical-align、column-* 設定は無効になります。

。コンテンツ {
            ボックスシャドウ: 0 0 1px #f6f;
            表示: グリッド;
            グリッドテンプレートの列: 100px 100px 100px;
            グリッドテンプレートの行: 100px 100px 100px;
        }

4. 属性の説明

grid-template-columns: 各列の幅を定義します。

grid-template-columns: 100px 100px 100px; // 合計 3 つの列、各列の幅は 100px です。=

grid-template-rows: 各行の行の高さを定義します。

grid-template-rows: 100px 100px 100px; //上から下まで、各行の高さは 100px です。

//ピクセルの使用に加えて、パーセンテージも使用できます。

拡大する：

値を繰り返し記述するのは面倒なので、繰り返し機能を使うと良いでしょう。

repeat(回数, サイズ);

例: repeat(3,100px); // 100px ずつ 3 回繰り返します。

繰り返し書き方：

グリッドテンプレート列:repeat(3,100px);

グリッドテンプレート行:repeat(3,100px);

可変サイズの特定のパターンを繰り返すこともできます。

例えば：

グリッドテンプレート列:100px 80px 100px;

次のように書き直します。

grid-template-columns:repeat(2,100px 80px); // 100px 80px のパターンを 2 回繰り返すことを表します。つまり、4 列です。

は以下と同等です:

グリッドテンプレート列:100px 80px 100px 80px;

図に示すように:

5. キーワード

1. 自動入力。コンテナのサイズが固定されておらず、アイテムのサイズが固定されている場合は、自動入力キーワードを使用して自動的に入力できます。

    。コンテンツ {
            ボックスシャドウ: 0 0 1px #f6f;
            表示: グリッド;
            グリッドテンプレート列: repeat(自動入力、100px);
} 

2、fr (分数): 2 つの列の幅がそれぞれ 1fr と 2fr の場合、後者の幅は前者の 2 倍であることを意味します。

   。コンテンツ {
            ボックスシャドウ: 0 0 1px #f6f;
            表示: グリッド;
            グリッドテンプレートの列: 1fr 2fr;
            グリッドテンプレートの行: repeat(3, 100px 80px);
}

fr は px と一緒に使用することもできます。

        。コンテンツ {
            ボックスシャドウ: 0 0 1px #f6f;
            表示: グリッド;
            グリッドテンプレート列: 400px 1fr 2fr;
} 

3.最小最大();

グリッドテンプレートの列: 1fr 5fr minmax(100px, 1fr);

説明: 最初の列は 1fr、2 番目の列は 5fr、3 番目の列の最小値は 100px、最大値は 1fr です。 2 列目の fr が無限大で、3 列目が 100px に達すると、1 列目から値を借用します。

       。コンテンツ {
            ボックスシャドウ: 0 0 1px #f6f;
            表示: グリッド;
            グリッドテンプレートの列: 1fr 5fr minmax(100px, 1fr);
}

4.自動: 適応型;

   。コンテンツ {
            ボックスシャドウ: 0 0 1px #f6f;
            表示: グリッド;
            グリッドテンプレート列: 100px 自動 100px;
}

6. グリッド線名:

        。コンテンツ {
            ボックスシャドウ: 0 0 1px #f6f;
            表示: グリッド;
            グリッドテンプレート列: [c1] 100px [c2] 100px [c3] 自動 [c4];
            グリッドテンプレート行: [r1] 100px [r2] 100px [r3] 自動 [r4];
}

説明: 後で簡単に参照できるように、各グリッド ラインの名前を指定します。

複数の名前が存在する場合もあります。[c1,c1a]

7. 間隔

row-gap: 行間隔;

 。コンテンツ {
            ボックスシャドウ: 0 0 1px #f6f;
            表示: グリッド;
            グリッドテンプレートの列: 100px 100px 100px;
            グリッドテンプレートの行: 100px 100px 100px;
            行間隔: 20px;
}

colum-gap: 列間隔;

 。コンテンツ {
            ボックスシャドウ: 0 0 1px #f6f;
            表示: グリッド;
            グリッドテンプレートの列: 100px 100px 100px;
            グリッドテンプレートの行: 100px 100px 100px;
            列間隔: 20px;
}

略語：

ギャップ:20px 20px;

row-gap と column-gap の短縮形。

ギャップにより 2 番目の値が省略され、ブラウザーは 2 番目の値を最初の値と等しいとみなします。

8. 地域

grid-template-areas: グリッド レイアウトでは、単一のセルまたは複数のセルから構成される「領域」を指定できます。 grid-template-areas プロパティは領域を定義するために使用されます。

  。コンテンツ {
            ボックスシャドウ: 0 0 1px #f6f;
            表示: グリッド;
            グリッドテンプレート領域: 'abc' 'def' 'gh i';
        }

要約する

以上が CSS3 の display:grid とグリッド レイアウトの紹介です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!