技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

CSS Grid グリッド レイアウトのチュートリアル

I. 概要

グリッド レイアウト (Grid) は、最も強力な CSS レイアウト ソリューションです。

Web ページをグリッドに分割し、異なるグリッドを任意に組み合わせてさまざまなレイアウトを作成できます。以前は、複雑な CSS フレームワークを介してのみ実現できた効果が、現在ではブラウザーに組み込まれています。

上の写真のようなレイアウトは、グリッド レイアウトの専門分野です。

グリッド レイアウトは Flex レイアウトと類似点があり、どちらもコンテナ内の複数のアイテムの位置を指定できます。ただし、重要な違いもあります。

フレックスレイアウトは軸レイアウトであり、軸に対する「項目」の位置のみを指定できます。1次元レイアウト 。 グリッドレイアウトは、コンテナを「行」と「列」に分割してセルを生成し、「アイテムが配置されている」セルを指定します。2Dレイアウト 。 グリッド レイアウトは、フレックス レイアウトよりもはるかに強力です。

2. 基本的な考え方

グリッド レイアウトを学習する前に、いくつかの基本概念を理解する必要があります。

2.1 コンテナとプロジェクト

グリッド状に配置された領域を「コンテナ」と呼びます。コンテナ内のグリッド配置を使用する子要素は「アイテム」と呼ばれます。

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>
1
2
3
4
5

上記のコードでは、最も外側の<div>要素はコンテナであり、内部の 3 つの要素は<div>要素はアイテムです。

知らせ: プロジェクトはコンテナーの最上位の子要素のみになることができ、上記のコードのようなプロジェクトの子要素は含まれません。<p>要素はアイテムではありません。 グリッド レイアウトはプロジェクトにのみ有効です。

2.2 行と列

コンテナ内の水平方向の領域を「行」、垂直方向の領域を「列」と呼びます。

上の図では、横方向の暗い領域が「行」、縦方向の暗い領域が「列」です。

2.3 細胞

行と列が交差する領域を「セル」と呼びます。

通常の状況下で、nわかりました、そしてm列が生成しますn x m細胞。たとえば、3 行 3 列では 9 個のセルが生成されます。

2.4 グリッド線

グリッドを区切る線を「グリッド線」と呼びます。水平グリッド線は行を分割し、垂直グリッド線は列を分割します。

通常の状況下で、nわかりましたn + 1ルート水平グリッド線、m上場m + 1垂直グリッド線は 3 本あります。たとえば、水平グリッド線は 3 行に 4 本あります。

上の図は、合計 5 つの水平グリッド ラインと 5 つの垂直グリッド ラインを持つ 4 x 4 グリッドです。

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

グリッド レイアウトのプロパティは 2 つのカテゴリに分類されます。 1 つのタイプはコンテナー上で定義され、コンテナー プロパティと呼ばれます。もう 1 つのタイプはプロジェクト上で定義され、プロジェクト プロパティと呼ばれます。このパートでは、最初にコンテナーのプロパティを紹介します。

3.1 表示属性

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

div {
  display: grid;
}
1
2
3

上の写真はdisplay: gridの効果。

デフォルトでは、コンテナ要素はブロックレベルの要素ですが、インライン要素に設定することもできます。

div {
  display: inline-grid;
}
1
2
3

上記のコードは次のように指定しますdiv内部でグリッド レイアウトを使用するインライン要素です。

上の写真はdisplay: inline-gridの効果。

グリッドレイアウトに設定した後、コンテナのサブ要素（アイテム）が表示されないことに注意してください。float、display: inline-block、display: table-cell、vertical-alignそしてcolumn-*その他の設定はすべて無効になります。

3.2 グリッドテンプレート列属性、グリッドテンプレート行属性

コンテナーはグリッド レイアウトを指定した後、行と列を分割する必要があります。grid-template-columnsプロパティは各列の列幅を定義します。grid-template-rowsプロパティは各行の行の高さを定義します。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}
1
2
3
4
5

上記のコード列幅と行高さの両方が 3 行 3 列のグリッドを指定します。100px。

絶対単位を使用する代わりに、パーセンテージを使用することもできます。

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}
1
2
3
4
5

（1）繰り返し（）

特にグリッドの数が多い場合、同じ値を繰り返し書き込むのは非常に面倒な場合があります。現時点で使用できるのは、repeat()繰り返し値を簡略化する関数。上記のコードでは、repeat()以下のように書き換えた。

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}
1
2
3
4
5

repeat()2 つのパラメータを受け入れます。最初のパラメータは繰り返しの数 (上記の例では 3)、2 番目のパラメータは繰り返す値です。

repeat()パターンを繰り返しても大丈夫です。

grid-template-columns: repeat(2, 100px 20px 80px);
1

上記のコード6 列が定義されており、1 列目と 4 列目の幅は100px、2 列目と 5 列目20px、3列目と6列目80px。

(2) 自動入力キーワード

場合によっては、セルのサイズは固定されていますが、コンテナーのサイズは定義されていません。各行 (または列) にできるだけ多くのセルを収容したい場合は、次のように使用できます。auto-fillキーワードはオートコンプリートを表します。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}
1
2
3
4

上記のコード各列の幅を表します100pxその後、コンテナーに列を保持できなくなるまで自動的に充填されます。

とは別にauto-fill、キーワードauto-fit 、両方の動作は基本的に同じです。コンテナーが 1 行にすべてのセルを収容できる十分な幅があり、セルの幅が固定されていない場合のみ行動の違い：auto-fill残りの幅は空のセルで埋められます。auto-fitセルの幅を拡張しようとします。

(3) frキーワード

比例関係を便利に表現するために、グリッド レイアウトには次のような機能があります。frキーワード (fraction の略で、「断片」を意味します)。2 つの列の幅が1frそして2fr、これは後者が前者の2倍であることを意味します。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
1
2
3
4

上記のコード同じ幅の 2 つの列を表します。

fr絶対長さ単位と併用できるので大変便利です。

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}
1
2
3
4

上記のコードこれは、最初の列の幅が 150 ピクセルで、2 番目の列の幅が 3 番目の列の半分であることを意味します。

（4）最小最大（）

minmax()この関数は長さの範囲を生成し、長さがこの範囲内にあることを示します。最小値と最大値の 2 つのパラメータを受け入れます。

grid-template-columns: 1fr 1fr minmax(100px, 1fr);
1

上記のコードでは、minmax(100px, 1fr)列幅が以上であることを示します100px、以下1fr。

(5)自動キーワード

autoキーワード表現の長さはブラウザ自体によって決定されます。

grid-template-columns: 100px auto 100px;
1

上記のコードでは、セルの内容が設定されていない限り、2 番目の列の幅は基本的に列内のセルの最大幅と等しくなります。min-width、この値は最大幅よりも大きくなります。

(6) グリッド線の名称

grid-template-columns属性とgrid-template-rowsプロパティでは、角括弧を使用して各グリッド ラインの名前を指定し、後で簡単に参照できるようにすることもできます。

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
1
2
3
4
5

上記のコードは 3 行 x 3 列のグリッド レイアウトを指定しているため、垂直グリッド線が 4 本、水平グリッド線が 4 本あります。角括弧内は 8 行の名前です。

グリッド レイアウトでは、同じ行に複数の名前を付けることができます。[fifth-line row-5]。

(7) レイアウト例

grid-template-columnsプロパティは、Web ページのレイアウトに非常に役立ちます。 2 列レイアウトに必要なコードは 1 行だけです。

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}
1
2
3
4

上記のコードは、左の列を 70% に設定し、右の列を 30% に設定します。

伝統的な 12 グリッド レイアウトも書きやすいです。

grid-template-columns: repeat(12, 1fr);
1

3.3 グリッド行ギャップ属性、グリッド列ギャップ属性、グリッドギャップ属性

grid-row-gapこのプロパティは行間の間隔 (行間隔) を設定します。grid-column-gapプロパティは列間の間隔 (列間隔) を設定します。

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
1
2
3
4

上記のコード真ん中、grid-row-gap行間を設定するために使用されます。grid-column-gap列間隔を設定するために使用されます。

grid-gapプロパティは次のとおりです。grid-column-gapそしてgrid-row-gapの省略形を組み合わせた構文は次のとおりです。

grid-gap: <grid-row-gap> <grid-column-gap>;
1

したがって、上記の CSS コードは次のコードと同等です。

.container {
  grid-gap: 20px 20px;
}
1
2
3

もしgrid-gap2 番目の値は省略され、ブラウザは 2 番目の値が最初の値と等しいとみなします。

最新の規格によれば、上記 3 つの属性名はgrid-プレフィックスは削除されていますが、grid-column-gapそしてgrid-row-gapと書かれていますcolumn-gapそしてrow-gap，grid-gapと書かれていますgap。

3.4 グリッドテンプレートエリアプロパティ

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

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas:
    'a b c'
    'd e f'
    'g h i';
}
1
2
3
4
5
6
7
8
9

上記のコードは、まず 9 つのセルを分割し、それらに名前を付けます。a到着i9 つのエリアは、それぞれこれら 9 つのセルに対応します。

複数のセルを1つの領域に結合する書き込み方法は以下のとおりです。

grid-template-areas:
  'a a a'
  'b b b'
  'c c c';
1
2
3
4

上記のコードは 9 つのセルを次のように分割します。a、b、c3つのエリア。

以下はレイアウトの例です。

grid-template-areas:
  'header header header'
  'main main sidebar'
  'footer footer footer';
1
2
3
4

上記のコードでは、先頭がヘッダー領域です。header、一番下はフッター領域ですfooter、真ん中の部分はmainそしてsidebar。

一部の領域を活用する必要がない場合は、「ポイント」を使用します (.）急行。

grid-template-areas:
  'a . c'
  'd . f'
  'g . i';
1
2
3
4

上記のコードでは、中央の列はドットです。これは、セルが使用されていないか、セルがどの領域にも属していないことを意味します。

領域の名前がグリッド線に影響することに注意してください。各エリアの開始グリッド ラインには自動的に名前が付けられます。区域名-start、終了したグリッド線には自動的に名前が付けられます。区域名-end。

たとえば、そのエリアには次のような名前が付けられます。header、開始位置の水平グリッド線と垂直グリッド線が呼び出されます。header-start、終了位置の水平グリッド線と垂直グリッド線は、header-end。

3.5 グリッド自動フロー属性

グリッドが分割されると、コンテナの子要素が各グリッドに順番に自動的に配置されます。デフォルトの配置順序は「行が最初、列が 2 番目」です。つまり、最初の行を埋めてから 2 番目の行の配置を開始します。これは、下の図の番号の順序です。

この命令は次によって与えられますgrid-auto-flow属性によって決定され、デフォルト値は次のとおりです。rowつまり、「最初に行、次に行」です。に設定することもできますcolumn、「最初に行、次に行」になります。

grid-auto-flow: column;
1

上記のコードすでにセットアップされていますcolumn今後、配置順序は以下のようになります。

grid-auto-flow属性を次のように設定することに加えて、rowそしてcolumn、に設定することもできますrow denseそしてcolumn dense 。これら 2 つの値は主に、特定のアイテムに位置が割り当てられた後、残りのアイテムを自動的に配置するために使用されます。

以下の例プロジェクト No. 1 とプロジェクト No. 2 がそれぞれ 2 つのセルを占めるようにし、デフォルトでgrid-auto-flow: rowこの場合、以下のようなレイアウトが生成されます。

上の図では、アイテム No. 1 の後ろの位置が空になっています。これは、デフォルトではアイテム No. 2 の後にアイテム No. 3 が配置されているためです。

ここで設定を変更し、次のように設定しますrow dense, 「最初の行、2 番目の列」を意味し、スペースを入れずにできるだけ隙間なく埋めます。

grid-auto-flow: row dense;
1

上記のコード効果は以下の通りです。

上の画像では、最初に 1 行目が入力され、次に 2 行目が入力されるため、項目 1 の後に項目 3 が続きます。 アイテム番号 8 と番号 9 は 4 行目に配置されます。

設定を次のように変更すると、column dense, 「最初に列、次に行」を意味し、スペースをできるだけ埋めます。

grid-auto-flow: column dense;
1

上記のコード効果は以下の通りです。

上の画像では、最初に 1 列目に入力され、次に 2 列目に入力されるため、項目番号 3 が最初の列に、項目番号 4 が 2 列目に表示されます。 項目 8 と 9 は 4 列目に詰め込まれました。

3.6 justify-items 属性、align-items 属性、place-items 属性

justify-itemsプロパティはセルの内容の水平位置 (左、中央、右) を設定します。align-itemsプロパティは、セルの内容の垂直位置 (上、中央、下) を設定します。

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}
1
2
3
4

これら 2 つの属性はまったく同じように記述され、次の値を取ることができます。

• start: セルの開始端を揃えます。
• end: セルの終端に位置合わせします。
• center: セル内の中心。
• ストレッチ: セルの幅全体を埋めるようにストレッチします (デフォルト値)。

.container {
  justify-items: start;
}
1
2
3

上記のコードセルの内容が左揃えであることを示し、その効果は次のようになります。

.container {
  align-items: start;
}
1
2
3

上記のコードセルの内容が先頭に揃えられていることを示し、その効果は次のようになります。

place-itemsプロパティは次のとおりです。align-items属性とjustify-itemsプロパティを組み合わせた短縮形。

place-items: <align-items> <justify-items>;
1

以下に例を示します。

place-items: start end;
1

2 番目の値が省略された場合、ブラウザはそれが最初の値と等しいとみなします。

3.7 justify-content 属性、align-content 属性、place-content 属性

justify-content属性はコンテナ内のコンテンツ領域全体の水平位置 (左、中央、右) です。align-content属性は、コンテンツ領域全体の垂直位置 (上、中、下) です。

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
1
2
3
4

これら 2 つの属性はまったく同じように記述され、次の値を取ることができます。 (以下の写真はすべてこちらを参考にさせていただきました)justify-contentたとえば、プロパティalign-content属性図は、水平方向が垂直方向に変更されていることを除いて、まったく同じです。 )

• start - 整列されたコンテナの開始境界線。
  
• end - コンテナの終了境界線を揃えます。
  
• center - コンテナを内側の中央に配置します。
  
• ストレッチ - アイテムのサイズが指定されていない場合、グリッド コンテナー全体を占めるようにストレッチします。
  
• space-around - 各アイテムの両側に等しいスペース。したがって、アイテム間のスペースは、アイテムとコンテナー境界間のスペースの 2 倍になります。
  
• space-between - アイテム間には均等なスペースがあり、アイテムとコンテナーの境界線の間にはスペースがありません。
  
• space-evenly - 項目間の間隔は等しく、項目間の間隔とコンテナの境界線も同じ長さです。
  
  place-contentプロパティは次のとおりです。align-content属性とjustify-contentプロパティを組み合わせた短縮形。

place-content: <align-content> <justify-content>;
1

以下に例を示します。

place-content: space-around space-evenly;
1

2 番目の値を省略すると、ブラウザは 2 番目の値が最初の値と等しいと想定します。

3.8 Grid-auto-columns プロパティ、grid-auto-rows プロパティ

場合によっては、一部の項目が既存のグリッドの外側の位置に割り当てられることがあります。たとえば、グリッドには 3 列しかありませんが、5 行目にある項目が指定されているとします。このとき、ブラウザはアイテムの配置を容易にするために追加のグリッドを自動的に生成します。

grid-auto-columns属性とgrid-auto-rowsプロパティは、ブラウザによって自動的に作成される冗長グリッドの列幅と行高さを設定するために使用されます。それらは次と同じように書かれていますgrid-template-columnsそしてgrid-template-rowsまったく同じ。これら 2 つのプロパティが指定されていない場合、ブラウザはセルの内容のサイズに基づいて新しいグリッドの列の幅と行の高さを決定します。

以下の例内部の分割グリッドは3行×3列ですが、4行目に項目No.8、5行目に項目No.9が指定されています。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px;
}
1
2
3
4
5
6

上記のコードは、新しい行の高さが一律 50 ピクセル (元の行の高さは 100 ピクセル) であることを指定します。

3.9 グリッドテンプレート属性、グリッド属性

grid-templateプロパティは次のとおりです。grid-template-columns、grid-template-rowsそしてgrid-template-areasこれら 3 つのプロパティを組み合わせた短縮形。

gridプロパティは次のとおりです。grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flowこれら 6 つのプロパティを組み合わせた略称。

読み書きの容易さの観点から、属性をマージしないことをお勧めします。そのため、これら 2 つの属性についてはここでは詳しく紹介しません。

4. プロジェクトの属性

プロジェクトでは次のプロパティが定義されています。

4.1 グリッド列開始プロパティ、グリッド列終了プロパティ、グリッド行開始プロパティ、グリッド行終了プロパティ

プロジェクトの位置を指定する具体的な方法は、プロジェクトの4つの境界線とそれぞれのグリッド線の位置を指定することです。

• grid-column-startプロパティ: 左境界線が配置される垂直グリッド線
• grid-column-endプロパティ: 右の境界線が配置される垂直グリッド線
• grid-row-startプロパティ: 上境界線が配置される水平グリッド線
• grid-row-endプロパティ: 下の境界線が配置される水平グリッド線

.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}
1
2
3
4

上記のコード項目 1 の左境界線が 2 番目の垂直グリッド線であり、右境界線が 4 番目の垂直グリッド線であることを指定します。

上の図では、項目番号 1 の左右の境界線のみが指定されており、上下の境界線は指定されていないため、デフォルトの位置が使用されます。つまり、上境界線が最初の水平グリッド線になります。下の境界線は 2 番目の水平グリッド線です。

項目 1 を除いて、その他の項目は位置の指定がなく、ブラウザによって自動的に配置されます。このとき、その位置はコンテナーによって決定されます。grid-auto-flow属性によって決定され、この属性のデフォルト値は次のとおりです。row , したがって、「最初に行、次に列」に配置されます。リーダーはこの属性の値を次のように変更できます。column、row denseそしてcolumn dense, 他のアイテムの位置がどのように変化したかを確認します。

以下の例4つの境界線の位置を指定した効果です。

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}
1
2
3
4
5
6

これら 4 つの属性の値は、グリッド ライン番号として指定するだけでなく、グリッド ラインの名前としても指定できます。

.item-1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}
1
2
3
4

上記コードでは、左右の境界線の位置をグリッド線の名前として指定しています。

これら 4 つの属性の値も使用できますspan「スパン」、つまり、左右の境界線 (上下の境界線) 間にまたがるグリッドの数を示すキーワード。

.item-1 {
  grid-column-start: span 2;
}
1
2
3

上記のコード項目番号 1 の左枠が右枠から 2 グリッドにまたがることを示します。

これに関連するのは、以下のコード効果も全く同じです。

.item-1 {
  grid-column-end: span 2;
}
1
2
3

これら 4 つの属性を使用して、項目が重複する場合は、z-index項目の重なり順を指定するプロパティです。

4.2 グリッド列属性、グリッド行属性

grid-columnプロパティは次のとおりです。grid-column-startそしてgrid-column-endの省略形を組み合わせたものgrid-rowプロパティは次のとおりです。grid-row-start属性とgrid-row-end合併の略称。

.item {
  grid-column: <start-line/ <end-line>;
  grid-row: <start-line/ <end-line>;
}
1
2
3
4

以下に例を示します。

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
1
2
3
4
5
6
7
8
9
10
11

上記のコードでは、プロジェクトはitem-11 列目の行から 3 列目の行までの最初の行を占めます。

これら 2 つの属性のうち、次のものも使用できます。spanスパンするグリッドの数を示すキーワード。

.item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}
1
2
3
4
5
6
7
8
9
10
11

上記のコードで、プロジェクトitem-1占有領域は、１行目＋２行目、１列目＋２列目となる。

スラッシュとそれに続く部分は省略でき、デフォルトでグリッドにまたがります。

.item-1 {
  grid-column: 1;
  grid-row: 1;
}
1
2
3
4

上記のコードでは、プロジェクトはitem-1左上隅の最初のグリッドを占めます。

4.3 グリッド領域属性

grid-area属性は、アイテムが配置される領域を指定します。

.item-1 {
  grid-area: e;
}
1
2
3

上記のコードでは、プロジェクト No. 1 は にあります。eエリアでは以下のような効果があります。

grid-areaプロパティは次のようにも使用できますgrid-row-start、grid-column-start、grid-row-end、grid-column-endマージされた略語形式は、プロジェクトの場所を直接指定します。

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
1
2
3

以下は、例。

.item-1 {
  grid-area: 1 / 1 / 3 / 3;
}
1
2
3

4.4 justify-self 属性、align-self 属性、place-self 属性

justify-selfこのプロパティは、セルの内容の水平位置 (左、中央、右) を設定し、その後にjustify-itemsプロパティはまったく同じように使用されますが、適用されるのは 1 つの項目のみです。

align-selfプロパティはセルの内容の垂直位置 (上、中央、下) を設定し、その後にプロパティが続きます。align-items属性の使用法はまったく同じで、単一のプロジェクトにのみ影響します。

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}
1
2
3
4

どちらのプロパティも次の 4 つの値を取ることができます。

• start: セルの開始端を揃えます。
• end: セルの終端に位置合わせします。
• center: セル内の中心。
• ストレッチ: セルの幅全体を埋めるようにストレッチします (デフォルト値)。

以下でありjustify-self: startの例。

.item-1 {
  justify-self: start;
}
1
2
3

place-selfプロパティは次のとおりです。align-self属性とjustify-selfプロパティを組み合わせた短縮形。

place-self: <align-self> <justify-self>;
1

以下に例を示します。

place-self: center center;
1

2 番目の値を省略した場合、place-selfプロパティは 2 つの値が等しいとみなします。