CSS グリッド レイアウト (Grid Layout )

目次

グリッド レイアウト関連の CSS プロパティ

1. CSS グリッド レイアウトの基本概念
   1. グリッド関連用語
   2. グリッドレイアウトの属性分類
2. grid属性: 明示的なグリッドと暗黙的なグリッドの両方を定義します (短縮属性)
3. Grid-template 属性: 明示的なグリッド領域、行トラック、列トラックを同時に設定します (短縮プロパティ)
   1. Grid-template-rows 属性: 明示的な行トラックの行ライン名と行トラック サイズを設定します
   2. Grid-template-columns プロパティ: 明示的な列トラックの列ライン名と列トラック サイズを設定します。
   3. Grid-template-areas 属性: グリッド領域と領域名を設定します (最初に行と列のトラック サイズを設定する必要があります)
4. Grid-auto-rows プロパティ: 暗黙的な行トラックのサイズを設定します
5. Grid-auto-columns 属性: 暗黙的な列トラックのサイズを設定します
6. Grid-auto-flow 属性: 自動レイアウト要素の配置を設定します (行ごと/列ごと、グリッド行属性、グリッド列属性を使用)
7. row-gap (grid-row-gap) 属性: 行間のギャップ サイズ
   1. row-gap (grid-row-gap) 属性: 行間のギャップ サイズ
   2. column-gap (grid-column-gap) 属性: 列間のギャップ サイズ
8. Grid-area 属性: グリッド項目を配置する領域 (行と列の開始位置と終了位置) を指定します。
   1. Grid-row-start 属性: グリッド項目が配置される行の開始位置
   2. Grid-row-end 属性: グリッド項目が配置される行の終了位置
   3. Grid-column-start 属性: グリッド項目が配置される列の開始位置
   4. Grid-column-end 属性: グリッド項目が配置される列の終了位置
9. Grid-column 属性: グリッド項目列の開始位置と終了位置を一元的に定義します (短縮属性)
10. grid-row 属性: グリッド項目が配置される行の開始位置と終了位置を一元的に定義します (短縮属性)
11. グリッド レイアウトの CSS データ型と関数
    1. グリッド レイアウトに関連する新しい CSS データ タイプ
    2. グリッド レイアウト関連の CSS 関数
       1. repeat()関数
       2. minmax(min, max) 関数
       3. fit-content(limit) 関数

グリッド レイアウト関連の CSS プロパティ

1. CSS グリッド レイアウトの基本概念

• CSS グリッド レイアウト (Grid Layout)
  • ① 機能: 領域を分割する
    • CSS グリッド レイアウトは、ページをいくつかの主要な領域に分割し、これらの領域のサイズ、位置、階層、その他の関係を定義するのに適しています。前提として、HTML がこれらの領域を生成します。 xff09;。
  • ② 二次元レイアウト / 行と列の双方向: テーブルと同様に、グリッド レイアウトは二次元レイアウトです。要素を行または列ごとに配置できます。
    • グリッドはテーブルよりもレイアウトがシンプルである可能性が高くなります。 「グリッド コンテナ」などの子要素は、CSS で配置された要素と同じように実際に重なって階層化されるように、自身を配置できます。

1.1 グリッド関連用語

• ⑴ グリッド コンテナ (grid container) および グリッド アイテム ( gr@ id ite@ms):
  • ① Grid コンテナ: 要素上で ❶ display: Grid または ❷ display: inline-grid を宣言することで、この要素はグリッドコンテナとして作成されます。
    • grid と inline-grid の違い
      • 1 行に限定されない: inline-grid コンテナは ❶ inline 機能 ， であるため、画像テキストのある行 ❷ 表示 ；
      • 1 行のみ: gridコンテナは❶ ブロック特性 ，❷ デフォルトの幅 100%， はインライン要素と同じ行に表示されません。
  • ② グリッド項目: 完了したら ↑， 要素 (グリッド コンテナ) すべて ❶ 直接の子要素がグリッド項目になります。
  • ③ 非グリッド項目: グリッド コンテナの直接の子要素ではない場合 ， グリッド レイアウトには参加せず ， 表示されます通常のドキュメントフローとして。

• ⑵ グリッド（Grid）
  • グリッドは、❶横線と❷縦線が「縦横に交差」して網のように交差することで定義されるため、グリッドと呼ばれます。 グリッド項目は、これらの行や列から区切られた位置に配置できます。
  • 明示的グリッド (explicit grid) と暗黙的グリッド (implicit grid)
    • ① 明示的なグリッド = は、grid-template-rows 属性と grid-template-columns 属性の使用を示します。行と列を指定してグリッドを定義します。
    • ② 暗黙的なグリッド = 明示的に定義されたトラック ， の外側にコンテンツを追加しますが、❶ 自動的に作成されたグリッド ， は grid-auto-columns と grid-auto-rows は、これらの暗黙的なグリッドの行トラックと列トラックのサイズを設定します。
      • 暗黙的なグリッドの重要な点は、コンテンツの変更が必要であり、グリッドが自動的に作成されるため、行と列のトラックを人為的に設定するのではなく「自動的に作成」されることです。
    • ③ 明示的なグリッドの数 = 行 × 列
      • 2 行 * 3 列=6 グリッド，これら 6 つは明示的なグリッド，ただし、8 つの子 div がある場合にはさらに 2 つあります。これは暗黙的なグリッドと呼ばれます。
      • 2 行 grid-template-rows: 100px 100px; + 3 列grid-template-columns: 1fr 1fr 1fr;
        • 

• ⑶ グリッド線（Grid lines）: 行線 + 列線
  • ① グリッド行 = グリッドトラック ⇒ グリッド線
    • グリッドを定義するときは、グリッド線ではなくグリッド レールを定義します。 グリッドは、各グリッド要素を配置できるように番号付きのグリッド線を作成します。
    • 1 つのグリッドには 4 つのグリッド線が必要です
    • 1 つのトラックには 2 つのグリッド線が必要です
  • ② グリッド線の番号と書き込みモード (writing-mode)
    • 書き込みモードはグリッド線の番号付けに影響します
      • グリッド線の番号付け順序は、書き込みモードによって異なります。
    • 左から右に書かれる言語では、1 という番号のグリッド線が一番左になります。
      • デフォルトの中国語表記モード ， は右から左です。
      • 
    • 右から左に書かれる言語では、1 という番号のグリッド線が右端にあります。
      • writing-mode: tb-rl: テキストの縦書き ， 要素を右から左へ。
      • 
  • ③ グリッド線の名前
    • 明示的なグリッドで作成されたグリッド線には、グリッド トラック サイズ情報の前後に角括弧で囲んで名前を付けることができます。 アイテムを配置するときは、番号の代わりにこれらの名前を使用できます。
  • ④ グリッド線と番号のアドレッシング（グリッドアイテムの配置） ⇒ グリッドアイテムの開始位置と終了位置を指定します。
    • グリッド線は番号で指定できます。
    • グリッド線は暗黙的なグリッドにも作成されますが、これらのグリッド線は番号でアドレス指定できません。
    • 項目は、グリッド線番号によってこのグリッドに配置できます。
  • 次は、3 つの水平グリッド線/行線 + 4 つの垂直グリッド線/列線です。
    • 

.wrapper {
  display: grid;
    grid-template-rows: [row1-start] 1fr [row2-start] 2fr [row3-start] 1fr;
}
.griditem2{
    grid-row: row2-start/row3-start;
}

• ⑷ グリッド トラック（Grid tracks）
  • ① グリッドの行と列 ， グリッド トラック に相当 ⇒ 列トラック (column tracks) + 行トラック ( row tracks )
  • ② 関連属性: grid-template-columns および grid-temp late-rows 属性を使用して行と列を定義します。グリッド内， グリッドのトラックを定義します。
  • ③ グリッド トラック = グリッド レイアウト内の任意の ❶ 2 つのグリッド線の間のスペース。
  • ④ 暗黙的なグリッド トラック サイズ = デフォルトは自動サイズです， これらの暗黙的トラックのサイズは、grid-auto-rows 属性と grid-auto-columns 属性で定義できます。
• ⑸ グリッド セル（Grid cell）
  • ① ネットワーク セル : グリッドの最小単位 = 4 本のグリッド線の間のスペース ， は表のセルの存在に似ています。
  • ② グリッド セルとグリッド トラックの違い: テーブル内のセルと行/列に相当します ⇒ 1 つのトラック内に複数のグリッド セル、つまり 1 つの行または列を含めることができます。
    • グリッド トラック = グリッド内の任意の 2 つのグリッド ライン間のスペース = 行ライン間のスペース / 列ライン間のスペース
    • グリッド セル = 4 つのグリッド ライン間のスペース = 2 つの行ライン+ 2 つの列ライン間のスペース
    • 
• ⑹ グリッド領域（Grid areas）
  • グリッド領域 = 1 つ以上の ❶ グリッド セルで構成される ❷ 長方形領域。
    • grid-template-areas プロパティを使用してグリッド領域を作成し、領域に名前を付けることができます。
  • • グリッド エリアは長方形である必要があります，同じ名前を持つ隣接するグリッドのみがグリッド エリアを形成するため、T 字型または L 字型のグリッド エリアを作成することはできません。

• ⑺ グリッド間隔（Gutters）， Beauty /'gʌtərs/
  • ① グリッド間隔 = グリッド トラック間の間隔
    • grid-column-gap/column-gap，grid-row-gap/row-gap または grid-gap/gap を使用して、グリッド レイアウトで行トラック間隔と列トラック間隔を作成できます。
    • デフォルトでは，トラック間に間隔はありません，間隔を設定すると，川に橋を架けるようなものです，川を2つの部分に分割します，しかし、魚を橋の上に配置できないように、グリッド間隔に要素を配置することはできません。
  • ② グリッドの間隔と間隔
    • トラックの間隔を空けるプロパティ ，グリッド間隔プロパティに加えて，外側マージン margin，内側マージン padding や、ボックス モデルの配置でスペース分布プロパティを使用することもできます。 ⇒ これらのメソッドは目に見える間隔を引き起こすため、グリッド間隔プロパティ ≠ 「ギャップ サイズ」になります。

• ⑻ 网格轴（Grid Axis），美 /ˈæksɪs/
  • ① 网格布局 = 二维布局 ⇒ 能够在 行和列中 布置内容 ⇒ 因此 在任何网格中 都有两个轴 ⇒ ❶ 行轴（即 行内轴 = 内联级方向）+ ❷ 列轴（即 块轴 = 块流方向）。
  • ② 网格轴和对齐
    • 行轴+列轴 ⇒ 行对齐+列对齐。
      • 沿着 这些轴，可以使用 盒模型对齐规范 中定义的属性对项目进行 行对齐和列对齐。
    • ❶ 行轴 = 行内轴
      • 
    • ❷ 列轴 = 块轴
      • 
  • ③ 网格轴 和 书写模式(writing-mode)
    • 轴的物理方向 会根据文档的书写模式 而改变。
    • writing-mode: vertical-lr
      • 

.wrapper {
  writing-mode: vertical-lr;
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  grid-gap: 10px;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
  <div class="item5">Item 5</div>
</div>
 

• ⑼ グリッド行（Grid row）
  • グリッド ライン = ライン トラック = 水平トラック (横書きモード) = 2 本の水平グリッド ライン間のスペース。 サイズは属性 grid-template-rows または短縮属性 grid， grid-template を通じて設定します。
    • グリッド項目が明示的なグリッドで作成された行の外側に配置される場合、暗黙的なグリッドにグリッド行を作成できます。 デフォルトでは、これらの行は自動サイズ設定されます。サイズは grid-auto-rows 属性を使用して設定することもできます。
• ⑽ グリッド列（Grid column）
  • グリッド列 = 列トラック = 垂直トラック (横書きモード) = 2 本の垂直グリッド線の間のスペース。 サイズは、属性 grid-template-columns または短縮属性 grid，grid-template を通じて設定します。
    • グリッド アイテムは、明示的なグリッドで作成された列の外側に配置されます。暗黙的なグリッドにグリッド列を作成できます。 デフォルトでは、これらの列のサイズは自動的に変更されます。サイズは、grid-auto-columns 属性を使用して設定することもできます。

• ⑾ ブラウザでグリッドを表示
  • Firefox ではグリッドを表示できます。
  • 
  • 

1.2 グリッドレイアウトの属性分類

• グリッド レイアウト CSS 属性分類
  • グリッド レイアウト関連の CSS プロパティ，該当するオブジェクトに応じて，は 2 つの部分に分かれています，1 つの部分はグリッド コンテナに適用されます，該当するオブジェクトの一部はグリッド アイテムです。
  • ① グリッド コンテナ上のアクション: 明示的なトラック ， 領域 ， 暗黙的なトラック ， 行と列の間隔 ， を定義します。適用可能なオブジェクトはすべてグリッド コンテナです。
  • ② グリッド項目に対するアクション: 特定のグリッド項目の行と列の開始位置と終了位置を設定します ， つまり、エリアを配置するとき ， 適用可能なオブジェクト， すべてのグリッド項目です。

2. grid属性: 明示的なグリッドと暗黙的なグリッドの両方を定義します (短縮属性)

• ⑴ 短縮属性: grid は CSS 短縮属性です。次の属性の設定に使用できます。
  • ① 明示的なグリッドプロパティ
    • ❶ 明示的な行トラック サイズ grid-template-rows
    • ❷ 明示的な列トラック サイズ grid-template-columns
    • ❸ グリッド領域 grid-template-areas
  • ② 暗黙的なグリッド プロパティ
    • ❶ 暗黙的な行トラック サイズ grid-auto-rows
    • ❷ 暗黙的な列トラック サイズ grid-auto-columns
    •  
    • ❸ 暗黙的なトラック配置 grid-auto-flow
  • 明示的または暗黙的なグリッドは 1 つの grid 属性でのみ宣言でき、間隔は宣言できません。属性を宣言する必要があります。
  • サブプロパティと初期値: 他の短縮プロパティと同じ ，サブプロパティが宣言されていない場合，初期値が使用されます。
    • ❶ 明示的な行トラックなし grid-template-rows: none
    • ❷ 明示的な列トラックなし grid-template-columns: none
    • ❸ 明示的なグリッド領域なし grid-template-areas: none
    • ❹ コンテンツに基づいて自動的に作成 grid-auto-rows: au to
    • ❺ コンテンツに基づいて自動的に作成 grid-auto-columns: auto
    • ❻ 行の塗りつぶしで配置 grid-auto-flow: row
  • 適用可能なオブジェクト: グリッド コンテナ grid containers
  • 継承: no
  • 間隔値のリセット: また、， この短縮宣言ではグリッドの間隔を設定できません（gutter）， この宣言によって間隔はリセットされません。
    • grid 属性 ，行と列のトラック間の間隔は設定されていません，以前に設定された行と列のトラック間の間隔は初期値にリセットされていません。つまり、間隔はまだ存在しています，初期の間隔なしではありません。
    • 

 
row-gap: 5px;
column-gap: 10px;
/* 明示的な行と列のトラック */
grid: 100px 50px/1fr 1fr;

• 記述例
• ① 初期値 grid: none
  • none は、すべてのサブプロパティを初期値に設定することを意味します。
• ② 明示的な行と列のトラック: grid: <grid-template>
  • grid-template と同じ使用方法を示します。 詳しい使用方法については、grid-template 属性の詳細を参照してください。
  • 

/*行トラックと列トラックの間隔を設定します*/
row-gap: 5px;
column-gap: 10px;
/*明示的なトラック、最初の行と 2 列目、スラッシュで区切る*/
grid: 100px 50px/1fr 1fr;

• ③ 明示的な行トラック/自動レイアウト モードの暗黙的な列トラック: grid: <grid-template-rows> / [ auto-flow && Density? ] <grid-auto-columns>?
  • 疑問符 ? ⇔ 項目がオプションであることを示します ， は存在する場合と存在しない場合があります。
  • したがって、明示的なライン トラック / の後、❶ dense の密集したキーワードと❷ 暗黙的な列トラック grid-auto-columns の値は省略できます。❶ 明示的なライン トラックと ❷ 自動レイアウトは 1 つだけ設定できます。
    • auto-flow &&dens? : && は一緒に使用することを意味します ， 実際に dense を追加することは暗黙的な自動レイアウト メソッドです grid-auto-flow dense を使用しない属性 ， の二重値構文は単一値構文です， 行の塗りつぶしrow または列ごとの column 。double 値は、行ごとの密な row dense または列ごとの密な column dense と同等です。
    • 自動フロー の位置と分析: キーワードがスラッシュ / の左側にある場合 ， は row として解析されます ， 右側にある場合 ， は column として解析されます。 ただし、自動レイアウトは暗黙的トラック用であるため、常に暗黙的トラックの片側に配置されます。 →auto-flow キーワードを含む側で設定したサイズが暗黙的トラックのサイズとなります。
    • auto-flow位置は暗黙的なトラックの前にも記述する必要があります。そうしないと、次のような構文エラーが発生します。
      • 
  • 行、列、トラック、スラッシュの関係 /: 前行と後列 → スラッシュの前は行 rows 関連属性 &# xff0 c; スラッシュの後ろには、列 columns 関連の属性があります。

grid: 50px 50px/auto-flow 1fr 2fr;

• は以下のコードと同等です
  • 

grid-template-rows: 50px 50px;
grid-auto-flow: column;/* 列ごとに埋めていきます */
grid-auto-columns: 1fr 2fr;/* 暗黙的な列トラック サイズ */

• ④ 自動レイアウト モードの暗黙的な行トラック / 明示的な列トラック: grid: [ auto-flow &&dens? ] <grid-auto-rows>? / <grid-template-columns>

grid: auto-flow dense 50px 100px/ 1fr 2fr;

• は以下のコードと同等です
  • 

grid-auto-rows: 50px 100px;
grid-auto-flow: row dense; /* 一行ずつ埋めていきます */
grid-template-columns: 1fr 2fr;

• 使用法の概要
  • grid:none は、グリッド トラックが設定されていない場合のサブプロパティ ， の初期値です。
  • grid: <grid-template> 明示的な行トラックと列トラックも設定します。
  • 暗黙的自動レイアウトと暗黙的トラックの残りの 2 種類は、明示的トラックに加えてトラック配置アイテムを設定したい場合に使用されます。明示的トラックで十分な場合 ， 配置する場所がないアイテムがない場合 ， は、暗黙的トラックと暗黙的自動レイアウトを設定する必要はありません。

3. Grid-template 属性: 明示的なグリッド領域、行トラック、列トラックを同時に設定します (短縮プロパティ)

• ⑴ 集中グリッド エリア ， 行トラック ， 列トラック (グリッドの列、行、エリア。): grid-template 属性
  • 短縮属性: これは、次のサブ属性の短縮属性です。 (サブプロパティと初期値) → 行/列/領域
    • ❶ grid-template-columns: none ⇔ デフォルトでは明示的な列トラックなし
    • ❷ grid-template-rows: none ⇔ デフォルトでは明示的な行トラックなし
    • ❸ grid-template-areas: none ⇔ デフォルトでは、指定されたグリッドエリアに分割されません>
  • 対象オブジェクト：グリッドコンテナ（グリッドコンテナ）
  • 継承：いいえ ⇔ 子要素には自動継承されません。

• ⑵ 文法
  • grid-template: none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
    • ① 行/列行の名前: line-names = カスタム文字列識別子
    • ② トラックサイズ : <track-size> ⇔ <length> | % | <flex> | min-content | max-content | auto| minmax(min, max) | fit-content()
    • ③ 明示的なトラック リスト: <explicit-track-list> = [ <line-names>? <track-size> ]+ <line-name s>?
    • ④ ?: オプションの注意事項そうですね。
    • ⑤ 行と条のトラックのサイズの前に、行の回線と移動の回線の名前を決定できます。
      • grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;

• ⑶ 属性値

  • ① 明示的なグリッドとグリッド領域はありません: none:
    • 3 つのサブプロパティをすべて none に設定します。キーワード ， は明示的なグリッドがないことを意味します + 指定されたグリッド領域はありません。 行と列は暗黙的に生成されます。
    • 暗黙的な行/列トラック サイズは、grid-auto-rows と grid-auto-columns によって設定されます。
  • ② 明示的な行/列トラックも設定します: <'grid-template-rows'> / <'grid-template-columns'>
    • 列の後の最初の列。
      • 行トラック grid-template-rows と列トラック grid-template-columns ， の値を指定し、grid-template-areas をデフォルト値 none に設定します ⇔ デフォルトのグリッド領域は設定されません。
      • セパレータ: / を使用して行トラックと列トラックを区切ります。
    • 行トラックと列トラックを同時に設定する grid-template:auto auto/1fr 1fr 1fr ; = ❶ 行トラック = 2 行 grid-template-rows: auto auto;+ ❷ 列トラック = Rid-template-columns: 1f r 1fr 1fr;
      • 
  • ③ オプションのライン名+グリッドエリア+行トラック+オプションのライン名+/+列トラック: [ <line- names >? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
    • [行行名] "エリア名 1 エリア名 2 ... エリア名 n" 行トラック サイズ [行行名]/列トラック サイズ 1 列トラック サイズ 2 ...列トラック サイズ n
    • グリッド エリア: grid-template-areas を列の <string> に設定します。
    • 行トラック: grid-template-rows は <track-size>（ デフォルトは auto） で、サイズの前後に定義された行をつなぎ合わせます。
    • 列トラック: / の後に明示的なトラック リスト <explicit-track-list> の grid-template-columns が続きます（デフォルトは none）
    • プロパティ値を無効にする: トラックを繰り返します ⇒ repeat()
      • トラックは「アスキー アート」と視覚的に揃えるために使用されます，つまり、文字のペイント，ここでは文字列 <string>） を 1 つずつ参照します。，列の属性値の数は列トラックの数に対応するため，列トラック リスト繰り返しトラックの repeat () 関数は許可されません。
      • 例 1: 短縮属性にグリッド領域のみを設定する grid-template: "left right-up right-up" "left right-down right-down";
        • 複数の二重引用符のペア → 複数行 ， 1 つの二重引用符の中にスペースで区切られた複数の文字列 → 複数の列があります。
        • 文字列 = 行 ⇒ 指定された文字列ごとに 1 行が生成されます。
        • 文字列は ⇒ ❶ スペースで区切られます。
        • 文字列 = 列内のスペースで区切られた文字 ⇒ 文字列内のスペースで区切られた各セル (セル) は、，"a a b"， の列を生成します。これは 1 行 3 列を意味します。
          • 文字列内の各セルは列を作成します。
          • セル間も❶スペースで区切られています。
        • 
        • 例 2: 行ライン名+ グリッド領域と行列トラックを同時に設定する
          • [行ライン名] "エリア名 1 エリア名 2 ..." 行トラックサイズ [行ライン名] / 列トラックサイズ 1 列トラックサイズ 2 ...
            • ， 行名は角かっこ [] ， エリア名は "" 二重引用符で囲む必要があることに注意してください。
          • グリッド テンプレート: [ヘッダー]"a a a" 100px [ヘッダー] [メイン]"b b b" 200px [メイン] / 1fr 2fr 1fr;
          • 

• ⑷ 法的価値

/*キー値 Keyword value */
grid-template: none;

/*行トラック/列トラック  grid-template-rows / grid-template-columns values */
grid-template: 100px 1fr / 50px 1fr;/*行トラックと列トラックのみを設定します*/
grid-template: auto 1fr / auto 1fr auto;
grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;/*行と列のトラックを設定する 行と列の名前を同時に設定する*/
grid-template: fit-content(100px) / fit-content(40%);

/* グリッドエリア + 行トラック/列トラック  grid-template-areas grid-template-rows / grid-template-column values */
grid-template: "a a a"
               "b b b";/*グリッド領域のみを設定します*/
grid-template: "a a a" 20%
               "b b b" auto;/*グリッド領域を設定する場合、行トラックを設定します。文字列は行に対応します ⇒ スペースで区切られ、行トラックのサイズはダブルクォーテーションの後ろに配置されます*/
grid-template: [header-top] "a a a"     [header-bottom]
                 [main-top] "b b b" 1fr [main-bottom]
                            / auto 1fr auto;/*グリッドエリアを設定する場合は、ライン名とグリッドエリアの行トラック列トラックを設定します*/

/* グローバル値 Global values */
grid-template: inherit;
grid-template: initial;
grid-template: unset;

• ⑸ ブラウザのサポート
  • 

3.1 Grid-template-rows 属性: 明示的な行トラックの行ライン名と行トラック サイズを設定します

• ⑴ グリッド❶行ラインの名前と❷行トラックのサイズを設定します: grid-template-rows プロパティ ， US /ˈtemplət/
  • グリッド行の❶グリッド線の名前と❷グリッドトラックのサイズを定義します。
  • ① 対象オブジェクト
    • グリッドコンテナ (grid containers)
  • ② 初期値: none ⇔ 明示的なライントラックを指定しない
  • ③ 継承 (Inherited): no

♣ 行名: 有効な文字列識別子

• ⑵ 明示的な行トラックのグリッド構文

  • grid-template-rows: none | <track-list> | <auto-track-list> | <line-name-list>?
    • ⇔ none| length | %| <flex> fr | max-content| min-content | minmax(min, max) | auto | fit-content() | repeat() ;
    • 行名: <line-names> = '[' <custom-ident>* ']'
      • ① カスタム文字列識別子: <custom-ident>ユーザー定義の文字列識別子。 CSS データ型 (ここでは) は、設定の行名を表すために使用されます。
      • ② 大文字と小文字が区別されます: 値に曖昧さがあってはなりません。
      • ③ 以下の 6 文字で構成できます：
        • ❶ 文字: (A - Z、a - z)、
        • ❷ 10 進数: (0 - 9)、
        • ❸ ハイフン: (-)、
        • ❹ アンダースコア: (_)、アンダースコア
        • ❺ エスケープ文字strong>: ( \)、
        • ❻ Unicode エンコード: （ 形式 ： エスケープ文字 （\） の後に 1 ～ 6 個の 16 進数 ）
        • 注 ：id1、iD1、および ID1 はすべて異なる識別子です，識別子では大文字と小文字が区別されるためです。 一方、，デコードできるため，すべての toto\? と toto\3F は同じです。
      • ④ 無効な値
        • <custom-ident> は一重引用符または二重引用符で囲むことはできません。
        • また、，最初の文字を数字にすることはできません (なぜですか?)。
          • コンパイルの原則では、， 文字列 123 を分析するときに ， 変数名で最初の文字を数値にすることが許可されている場合， アナライザーは、123 が数値定数であるべきか変数名であるべきかを認識しません。
          • 文字列解析分類: コンパイラ ， がプログラムの解析時に単語の最初の文字を読み取るとき、現在の単語がどのカテゴリに属しているかを知る必要があります。 ⇒ この方法 ❶ は、バックトラックせずに ， を解析するのに便利です。 (疑わしい、まだ確認されていません)
        • 最初のハイフン - の後には文字のみを続けることができます: 文字列の先頭をハイフン (-) の後に数字またはハイフンにすることはできません ， ハイフンの後に文字を続けることはできます。
        • 開始文字: 文字 ， ハイフン ， アンダースコア ， バックスラッシュ ， 数字のみを先頭にすることはできません ，
      • ⑤ 文字列識別子と文字列の違い: 二重引用符/単一引用符は必要かどうか。 識別子には引用符は必要ありません。

• 有効な値

/* キー値 Keyword value */
grid-template-rows: none;

/* トラックリストの値 track-list values */
grid-template-rows: 100px 1fr;
grid-template-rows: [行名linename] 100px;
grid-template-rows: [linename1] 100px [linename2 linename3];/*ライン名はトラックサイズの前後に設定可能*/
grid-template-rows: minmax(100px, 1fr);
grid-template-rows: fit-content(40%);
grid-template-rows: repeat(3, 200px);
grid-template-rows: subgrid;

/* 暗黙的な軌道リスト値 auto-track-list values */
grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
grid-template-rows: minmax(100px, max-content)
                       repeat(auto-fill, 200px) 20%;
grid-template-rows: [linename1] 100px [linename2]
                       repeat(auto-fit, [linename3 linename4] 300px)
                       100px;
grid-template-rows: [linename1 linename2] 100px
                       repeat(auto-fit, [linename1] 300px) [linename3];

/* グローバルな価値観 Global values */
grid-template-rows: inherit;
grid-template-rows: initial;
grid-template-rows: unset;

• 有効な識別子

nono79             混合英数字
ground-level       レターレター
-test              ハイフンの後に文字が続きます
_internal          アンダースコアの後に文字が続く
\22 toto Unicode   エンコーディングの後に文字が続く
bili\.bob          エスケープ期間

• 無効な識別子

34rem             第一个字符 不能是数字
-12rad            第一个字符连字符后 不能跟数字
bili.bob          只有字母数字、连字符-、下划线_不需要转义
--toto            第一个字符 不能为连字符 后跟连字符
'bilibob'         不能用单引号 包起来，这是一个字符串类型
"bilibob"         不能用双引号 包起来，这是一个字符串类型

• ⑶ グリッド トラックの属性値
  • ① 明示的なグリッドを指定しない / 暗黙的に行トラックを生成する: none
    • はキーワードです ， 明示的なグリッドがないことを意味します。 デフォルトでは、グリッド内の行はすべて暗黙的に生成されます。そのサイズは grid-auto-rows 属性によって決まります。
    • 暗黙的に生成されたグリッド
    • 
  • ② 長さの値: <length>
    • 負でない長さの値。 (要素のマージンを含む要素全体， が行トラックに配置されます)
    • grid-template-rows: 100px 50px;
      • 
  • ③ パーセント値: <percentage>
    • 負ではない値。
    • ❶ グリッド コンテナに対する <パーセント>。
    • パーセント値と親要素のサイズ: 特定の親要素のサイズが設定されていません ， パーセント値は機能しないか無効です。
      • グリッド コンテナのサイズが設定されていません: inline-grid など、グリッド コンテナのサイズがグリッド トラックのサイズに依存する場合） ⇒ つまり、グリッド コンテナのブロック サイズが不定の場合、パーセント値は ❶ auto として扱われます。
    • 特定の高さの値が設定されていない場合のデフォルトの書き込みモード (height 属性が設定されていない場合)
      • パーセント値が無効です，
      • 
    • グリッド コンテナの特定の高さを設定する場合 ⇒ パーセント値は有効です。
      • コンテナの高さ height: 500px; + 行トラック grid-template-rows:50%;
      • 
  • ④ 比率al: <flex> データ型 ⇔ 可変長=数値+fr:
    • 負ではない値。
    • 単位 fr を使用して、グリッド トラック サイズのバネ係数を定義します。
      • データ型を定義する各グリッド トラックは、残りの利用可能なスペースに比例して割り当てられます。
    • 外側の層が minmax()， で表される場合、それは自動最小値になります (つまり、 minmax(auto, <flex>) )。
    • grid-template-rows: 1fr 2fr 1fr 2fr;
      • 
  • ⑤ 最大コンテンツ サイズ: max-content
    • グリッド アイテムのコンテンツ幅の最大値を持つグリッド トラックを占有します。
      • max-content: 詳細については、[CSS3 の 4 つのアダプティブ キーワード: available、max-content、min-content、fit-content] を参照してください。
      • grid-template-rows:max-content;
        • 
  • ⑥ 最大最小コンテンツ サイズ: min-content
    • グリッド項目の最小コンテンツが最大のグリッド トラックを占有します。
    • min-content: 詳細については、[CSS3 の 4 つのアダプティブ キーワード: available、max-content、min-content、fit-content] を参照してください。
    • grid-template-rows:min-content;
      • 
• ⑦ サイズ範囲の設定: minmax(min, max) ⇒ minmax() この関数は、次の 4 つの CSS プロパティでのみ使用できます&# xff1a; 明示的および暗黙的な行と列のトラックを設定します grid-template-columns，grid-template-rows，grid-auto-columns，grid-auto-rows
  • ⇒ サポートされている属性値: minmax( [ <length> | <percentage>| min-content | max-content | auto ] , [ <length> | <percentage> | <flex> | min-content | max-content | auto ] )
  • 関数の詳細，を参照minmax() 関数の詳細。

• ⑧ コンテナの高さ/要素の内容に応じてサイズを自動的に割り当てる: auto

  • グリッドコンテナの高さの値/要素の内容に応じて決定します
    • 例 1: 高さを設定しない場合 grid-template-rows:auto;: ， 要素の内容に応じて自動配置する
    • 
    • 例 2: グリッド項目の高さを設定する場合 : コンテナの高さに応じて自動的に割り当てます，
      • height: 80px; + grid-template-rows:auto;
      • 
      • 
  • 調整プロパティ: グリッド トラックのサイズは auto (および auto のみ) です。プロパティ align-content と justify-content によって拡張できます。
  •  

• ⑨ サイズはコンテンツによって決まります ， コンテンツが多いほど、サイズも大きくなります ， ただし、制限値 limit を超えることはできません。 : fit-content(limit)

  • 属性値の型: 長さの値 ， パーセント値 ⇔ fit-content( [ <length> | <percentage> ] )
  • 詳細な説明については、fit-content() 関数の詳細な説明を参照してください。

• ⑩ トラックのリピート: repeat( [ <positive-integer> | auto-fill | auto-fit ] , <linenames>? <track-list> <linenames>? )

  • グリッド トラックの繰り返し部分を表します，多数の繰り返し線式を表すより簡潔な方法。
  • 繰り返しパターン: repeat() ❶ トラックリストの繰り返しフラグメントを表す CSS 関数， を使用すると、❷ 繰り返しパターンを示す多数の列または行をよりコンパクトな形式で記述することができます。
  • 行/列トラック用: この関数は、CSS グリッド プロパティ grid-template-columns および grid-template-rows で使用できます。
    • パラメータの説明とその他の例，CSS のrepeat() 関数の詳細な説明を参照してください。

• ⑪ subgrid

  • subgrid この値は、グリッドがその軸に沿って親グリッドの拡張部分を取得することを示します。
  • ， を明示的に指定する代わりに、グリッドの行/列のサイズは親グリッドの定義から取得されます。
  • 現在のサポートは非​​常に貧弱です，使用しないでください (2020.5.8)

• 上記の図例にはコードが含まれています

• css

*{
    margin: 0;
    padding: 0;
}
/*グリッドコンテナ*/
.gridcontainer{
    width: 30%;
    /*height: 500px;*/
    border: solid 5px lightseagreen;
    margin: 5px;
    display: grid;
    /*グリッドの列トラックを設定します*/
    /*grid-template-rows: none;*/
    /*grid-template-rows: 100px 50px;*/
    /*grid-template-rows:50%;!*コンテナの高さの特定の値を設定する場合、パーセント値のみが有効です*!*/
    /*grid-template-rows: 1fr 2fr 1fr 2fr;*/
    /*grid-template-rows: minmax(100px,1fr)  200px 2fr;*/
    /*grid-template-rows: minmax(100px,1fr);*/
    /*grid-template-rows:max-content;*/
    /*grid-template-rows:min-content;*/
    /*grid-template-rows:auto;*/
    /*grid-template-rows:fit-content(50px);*/
    /*grid-template-rows:fit-content(50%);*/
    /*grid-template-rows: repeat(3,150px);*/
    /*grid-template-rows: repeat(2,150px 80px);*/
    /*grid-template-rows: repeat(auto-fill,150px) 100px;*/
    /*grid-template-rows: repeat(auto-fit,150px) 100px;*/
}
/*グリッド項目*/
.gridcontainer div{
    border: solid 5px #bed5cb;
    margin: 10px;
    padding: 10px;
    font-weight: bold;
    /*max-height: 150px;*/
    /*min-height: 100px;*/
    /*height: 80px;*/

}
.green{
    background-color: #c4ffcd;
}
.red{
    background-color: #ffdcdd;
}

• html

<div class="gridcontainer">
    <div class="griditem1 green">one: 不怨天尤人，</div>
    <div class="griditem2 red">two: 不恶语伤人，</div>
    <div class="griditem3 green">three: 群处守嘴，</div>
    <div class="griditem4 red">four: 独处守心。</div>
</div>

• ⑷ グリッド行トラックのブラウザサポート
  • 

3.2 Grid-template-columns プロパティ: 明示的な列トラックの列ライン名と列トラック サイズを設定します。

• ⑴ グリッド列の列線の名前とグリッド列トラックのサイズを設定します: grid-template-columns 属性
  • 初期値 ( Initial value ): none
  • 適用可能なオブジェクト : グリッド コンテナー ( grid containers )
  • 継承 ( Inherited ): no

• ⑵ 明示的な列トラックの構文
  • grid-template-columns: none| length | %| auto| <flex> fr | max-content| min-content | minmax(min, max) | fit-content() | repeat() ;
  • よく使われる10種類の属性値 ↑

/* Keyword value */
grid-template-columns: none;

/* track-list values */
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);

/* auto-track-list values */
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns: minmax(100px, max-content)
                       repeat(auto-fill, 200px) 20%;
grid-template-columns: [linename1] 100px [linename2]
                       repeat(auto-fit, [linename3 linename4] 300px)
                       100px;
grid-template-columns: [linename1 linename2] 100px
                       repeat(auto-fit, [linename1] 300px) [linename3];

/* Global values */
grid-template-columns: inherit;
grid-template-columns: initial;
grid-template-columns: unset;

• ⑶ 列トラックの属性値
  • ① 明示的なグリッドなし / 暗黙的に生成された列トラック: none
    • はキーワードです ， 明示的なグリッドがないことを意味します。 すべての列は暗黙的に生成され、そのサイズは grid-auto-columns 属性によって決まります。
    • grid-template-columns: none;
      • 
  • ② 長さ: length
    • 負でない長さの値。
    • grid-template-columns: 150px 100px;
      • 
  • ③ パーセント値: %
    • グリッドのコンテナ サイズに対する相対的な負でない <percentage> 値。
    • grid-template-columns:50% 20% 30%;
      • 
  • ④ 可変長比例単位: <flex> fr
    • grid-template-columns:1fr 2fr 1fr;
      • 
  • ⑤ 最大コンテンツ: max-content
    • グリッド アイテムの最大のコンテンツでグリッド トラックを占有します。
    • max-content: 詳細については、[CSS3 の 4 つのアダプティブ キーワード: available、max-content、min-content、fit-content] を参照してください。
    • grid-template-columns:max-content 100px;
      • 
  • ⑥ 最小コンテンツ: min-content
    • グリッド項目の最小コンテンツが最大のグリッド トラックを占有します。
    • min-content: 詳細については、[CSS3 の 4 つのアダプティブ キーワード: available、max-content、min-content、fit-content] を参照してください。
    • grid-template-columns:min-content 1fr;
      • 
  • ⑦ サイズ範囲: minmax(min, max)
    • サイズ範囲を定義するプロパティは、， min 値以上、かつ max 値以下です。
    • max 値が min 値より小さい場合、その値は min 値として扱われます。
    • 最大値はグリッド トラック係数値<flex>可変長に設定できますが、最小値は設定できません。
      • 詳細については、minmax() 関数の詳細
      を参照してください。
    • grid-template-columns:minmax(min-content,1fr) 2fr;
      • 
    • ウィンドウが縮小します ⇒ ウィンドウも縮小します
      • 
  • ⑧ 自動的にサイズを割り当てる: auto
    • コンテナのサイズとコンテンツのサイズに応じてスペースを自動的に割り当てます。
      • このプロパティは <max-content> と同等です ，グリッド トラックが最大の場合、， は <min-content> と同等です。
    • グリッド トラックのサイズは auto です ( auto のみ)。align-content 属性と justify-content 属性によって拡大できます。
    • grid-template-columns: auto auto max-content;
      • 
  • ⑨ fit-content() : サイズはコンテナに合わせて調整されます， 最大値は特定の制限値を超えません。
    • 詳細については、fit-content() 関数の詳細
    • grid-template-columns:fit-content(100px) auto max-content;
    • 
  • 」を参照してください。 ⑩ トラックのリピート: repeat()
    • repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
    • 詳細については、repeat() 関数の詳細な説明を参照してください。
    • グリッド テンプレート列:repeat(2,1fr) 2fr;
      • 
• 上記に関係するコード
• css

/* グリッド列トラック */
grid-template-columns: none;
/*grid-template-columns: 150px;*/
grid-template-columns: 150px 100px;
grid-template-columns: 50% 20% 30%;
grid-template-columns: 1fr 2fr 1fr;
grid-template-columns: max-content 100px;
grid-template-columns: min-content 1fr;
grid-template-columns: minmax(min-content,150px) 100px;
grid-template-columns: minmax(min-content,1fr) 2fr;
grid-template-columns: auto auto max-content;
grid-template-columns:fit-content(100px) auto max-content;
grid-template-columns:repeat(2,1fr) 2fr;

• ⑷ グリッド列トラックのブラウザサポート
  • 

3.3 Grid-template-areas 属性: グリッド領域と領域名を設定します (最初に行と列のトラック サイズを設定する必要があります)

• ⑴ グリッド領域の分割と領域名を設定: grid-template-areas 属性
  • グリッド領域 (grid areas) とグリッド項目 (grid item) は関連しません。
  • ① グリッドエリアのコロケーション属性
    • grid-row-start， ，grid-column や grid-area などの❶グリッド配置属性 ⇒ と併用できます。
  • ② 初期値: none グリッド領域を設定・分割しない
  • ③ 対象オブジェクト: グリッドコンテナ(grid containers)
  • ④ 継承: no

• ⑵ グリッドエリア名の構文
  • grid-template-areas: none | <string>+;
    • 文字列: <string> は、❶ 文字列を表すために使用される ❷ データ型です。
      • エンティティにすることはできません: スペース   や — などのエンティティは、<string> では使用できません。
      • 引用符 + Unicode 文字:<string> データ型は、英語の二重引用符 （"） または英語の一重引用符 （' に含まれる任意の数のユニバーサル コードであり、Unicode 文字で構成されます。 。

• ⑶ グリッド領域の属性値

  • ① グリッド領域を設定しない: none
    • グリッド コンテナはグリッド領域 (grid areas) を定義しません。
  • ② 文字列: <string>+
    • 文字列 = 行 ⇒ 指定された文字列ごとに 1 行が生成されます。
      • 文字列は ⇒ ❶ スペースで区切られます。
    • 文字列 = 列内のスペースで区切られた文字 ⇒ 文字列内のスペースで区切られた各セル (セル) は列 ，"a a b"， を生成します。これは 1 行 3 列を意味します。
      • 文字列内の各セルは列を作成します。
      • セル間も❶スペースで区切られています。
    • 同じ名前の（隣接する） セル = グリッド エリア = グリッド エリア ⇒ 隣接する行または列にまたがる同じ名前の複数のセル ， をグリッド ブロック (grid area) と呼びます。
    • 長方形: 長方形以外のグリッド ブロックは無効です ⇒ 同じ名前のセルが隣接している必要があります (上下/左右)。

  ---

  • 例 1: 2 行 grid-template-rows: auto auto; + 34; "left right-down right-down";
    • 最初に行と列を設定し、次に領域を分割します: 注 ，最初に明示的な行と列のトラックを設定し、次に領域の分割と名前を設定します，そうしないと、Firefox はテスト中に領域名を表示しない可能性があります。
      • 文字列の 2 行 3 列は、行トラックと列トラックの 2 行 3 列に対応します。
      • 
      • Firefox ブラウザでは、グリッド線とグリッド領域の名前を表示できます。
        • 

• ⑷ ブラウザによるグリッド領域のサポート
  • 

4. Grid-auto-rows プロパティ: 暗黙的な行トラックのサイズを設定します。

• ⑴ 暗黙的に作成された行トラック サイズを設定する: grid-auto-rows 属性
  • ① 暗黙的なトラック:
    • 定義 1: 明示的に生成されたトラック以外のトラックはすべて暗黙的に生成されたトラックです。
      • グリッド アイテムが grid-template-rows を使用してその行の行トラックのサイズを明示的に指定しない場合、グリッド トラックはそれを保持するために暗黙的に作成されます。
      • つまり、すべてのトラックはデフォルトで暗黙的トラックです。grid-template-* でトラック サイズが明示的に設定されている場合にのみ、明示的トラックになります。
    • 定義 2: 自動的に生成されたグリッド トラックは暗黙的グリッド トラックと呼ばれます。
  • ② 暗黙的トラックの作成: ❶ グリッド項目がグリッド内のセルを超えている場合、またはグリッド項目 ❷ が明示的グリッドの外側に配置されている場合、暗黙的トラックが作成されます。
    • 暗黙的に生成されたトラック: 暗黙的に生成されたトラックの理由 ⇒ ❶ 境界外のトラック， への明示的な配置、または ❷ 自動配置アルゴリズムによって作成された余分なライン。 共通点は、明示的に作成されたライン トラックに加えてスペースが存在することです。この場合、ラインは暗黙的に作成されます。
  • ③ 初期値: auto サイズを自動的に割り当てる
  • ④ 適用オブジェクト: グリッドコンテナ(grid containers)
  • ⑤ 継承: no

• ⑵ 暗黙的な行トラックの構文

  • grid-auto-rows: <length> | <percentage> | min-content | max-content | auto | <flex> | minmax(min, max) | fit-content()
  • 8 つの属性値
  • grid-template-rows ＆＃xff0c;と比較して、明示的なトラックを設定します＆＃xff0c; 2パラメーター＆＃xff0c;❶none（明示的なトラックはデフォルトで生成されません＆＃xff0c;デフォルトトラックはインクラクトです） ed？）;

• ⑶ 正当な値

 /* Keyword values */
grid-auto-rows: min-content;
grid-auto-rows: max-content;
grid-auto-rows: auto;

/* length values */
grid-auto-rows: 100px;
grid-auto-rows: 20cm;
grid-auto-rows: 50vmax;

/* percentage values */
grid-auto-rows: 10%;
grid-auto-rows: 33.3%;

/* fr flex values */
grid-auto-rows: 0.5fr;
grid-auto-rows: 3fr;

/* minmax() values */
grid-auto-rows: minmax(100px, auto);
grid-auto-rows: minmax(max-content, 2fr);
grid-auto-rows: minmax(20%, 80vmax);

/* multiple track-size values */
grid-auto-rows: min-content max-content auto;
grid-auto-rows: 100px 150px 390px;
grid-auto-rows: 10% 33.3%;
grid-auto-rows: 0.5fr 3fr 1fr;
grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

/* Global values */
grid-auto-rows: inherit;
grid-auto-rows: initial;
grid-auto-rows: unset;

• ⑷ 暗黙的な行トラックの属性値

  • ① 長さの値:
    • 例 1: 1 行と 2 列を明示的に作成する: grid-template: 100px / 1fr 1fr; ⇒ 4 つのグリッド項目には 2 行が必要 ⇒ 2 行目は暗黙的に作成されます， デフォルト値は grid-auto-rows:atuo;，
      • 
    • 例 2: 行 2 = 暗黙的な行トラックのサイズを設定する : grid-auto-rows: 150px;
      • 
  • ② パーセント値（相対高さ値）： <percentage>
    • 例 1: グリッド コンテナには高さがありません height ⇒ この時点では、パーセント値 = auto 値 = がデフォルトのサイズです。
      • 
    • 例 2: 高さの値 ， パーセント値はのみ有効です: height: 500px; + grid-auto-rows: 30% ;
      • 
      • 例 3: 2 行を設定する 暗黙的に作成された行: height: 500px; + grid-auto-rows: 30%;
        • 
      • 例4：2つのサイズ＆＃xff0c; cycle ： height: 500px;+ grid-auto-rows: 30% 100px;
        • 
  • ③ 最大最小コンテンツ: min-content
    • グリッド トラックを占めるグリッド アイテムの最大および最小のコンテンツを示します。
      • キーワードの詳細な説明，この記事の下部にあるフレンドリー リンクを参照してください。
  • ④ 最大最大コンテンツ: max-content
    • グリッド トラックを占めるグリッド アイテムの最大のコンテンツを示します。
      • キーワードの詳細な説明，この記事の下部にあるフレンドリー リンクを参照してください。
  • ⑤ デフォルト値，最大または最小のコンテンツ: auto ⇔ コンテンツに基づいて自動的に作成
    • はキーワードです。
    • 最大値の場合は、max-content と同じです。
    • 最小値として ， は、グリッド トラックを占有するグリッド項目の最大最小サイズ (min-width/min-height min-width/min-height で指定) を表します。
  • ⑥ fr単位は比例的に割り当てられます: <flex>
  • ⑦ 指定された範囲内の値に設定します: minmax(min, max)
    • 詳細については、「minmax() 関数の詳細」を参照してください。
  • ⑧ サイズは拡大縮小できます， が、最大値は特定の制限を超えません: fit-content()
    • 詳細については、「fit-content() 関数の詳細」を参照してください。

• ⑸ ブラウザによる gird-auto-rows のサポート

  • IE は非標準の名前を使用します: -ms-grid-rows
  • Android 版 Firefox は複数の属性値を受け入れません。
  • 

5. Grid-auto-columns 属性: 暗黙的な列トラックのサイズを設定します

• ⑴ 暗黙的に作成される列トラックのサイズを設定する: grid-auto-columns 属性
  • ① 暗黙的な列トラック: grid-template-columns， で明示的に指定された列にグリッド項目が配置されていない場合、それを保持するための暗黙的なグリッド トラックが作成されます。
    • 言い換えると、，grid-template-columns は列トラックの外側に列を明示的に作成し、= 暗黙的な列トラックを作成します。
    • 暗黙的な列トラックの作成: grid-template-columns 属性が使用されていない場合、すべての列トラックが暗黙的な列トラックになります。
  • ② 初期値 ： Auto 自動割り当て領域
  • ③ 対象要素 ： グリッドコンテナ（ Grid Containers ）
  • ④ 継承 ： No ⇒ サブ要素を自動継承しません

• ⑵ 暗黙的な列トラック サイズの構文

  • grid-auto-columns: <length> | <percentage>| <flex> | min-content | max-content | auto | minmax(min,max) | fit-content( [ <length> | <percentage> ] )
 
  • 8 つの属性値
  • 例 1:
  • ① デフォルトのスタイル
    • 
  • ② 暗黙的な列トラックを設定: 明示的な列トラックを設定しない grid-template-columns， grid-auto-columns: 150px; ⇒ デフォルトの列は 1 つだけです。
    • 
  • ③ 2 つの列の値:grid-auto-columns: 150px 100px; ⇒ Firefox72、Google 78 でテスト 最初の列の値のみ認識できます。 ⇒ デフォルトでは、有効な列値は 1 つだけです。 列トラックの数が指定されていない場合、デフォルトは 1 つの列だけになります。
    • 
    • ④ エリア名と行数、列数を指定 grid-template-areas: "a a a"; + grid-auto-columns: 150px 100px; > ⇒ この時点で、2 つの列の値はリサイクルに有効です。
      • 

• ⑶ 暗黙的な列トラック サイズのブラウザ サポート

  • IE は非標準の名前を使用します: -ms-grid-columns
  • Android 版 Firefox は現在、複数の列値をサポートしていません。
  • 

• 法定価値

/* Keyword values */
grid-auto-columns: min-content;
grid-auto-columns: max-content;
grid-auto-columns: auto;

/* length values */
grid-auto-columns: 100px;
grid-auto-columns: 20cm;
grid-auto-columns: 50vmax;

/* percentage values */
grid-auto-columns: 10%;
grid-auto-columns: 33.3%;

/* flex values */
grid-auto-columns: 0.5fr;
grid-auto-columns: 3fr;

/* minmax() values */
grid-auto-columns: minmax(100px, auto);
grid-auto-columns: minmax(max-content, 2fr);
grid-auto-columns: minmax(20%, 80vmax);

/* fit-content() values */
grid-auto-columns: fit-content(400px);
grid-auto-columns: fit-content(5cm);
grid-auto-columns: fit-content(20%);

/* multiple track-size values */
grid-auto-columns: min-content max-content auto;
grid-auto-columns: 100px 150px 390px;
grid-auto-columns: 10% 33.3%;
grid-auto-columns: 0.5fr 3fr 1fr;
grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

/* Global values */
grid-auto-columns: inherit;
grid-auto-columns: initial;
grid-auto-columns: unset;

6. Grid-auto-flow 属性: 自動レイアウト要素の配置を設定します (行ごと/列ごと、グリッド行属性、グリッド列属性を使用)

• ⑴ 自動レイアウト要素の配置を設定する: grid-auto-flow 属性
  • 自動レイアウト アルゴリズムの動作方法を制御します。❷ 自動レイアウトされる要素がグリッド内にどのように配置されるかを正確に指定します。
  • ① 自動レイアウト要素: 属性を使用して位置を明示的に指定しない要素/グリッド項目 (grid items)， は、自動レイアウト要素です。
  • 要素/グリッド項目の位置を指定するにはどうすればよいですか?
    • 非自動レイアウト要素: 通常、grid-row、grid-column，grid-row-start、gird-row-end... を使用して要素の配置位置を指定します ，これらの属性を使用して要素の位置を指定します， これは "auto ではなくなりましたマティック レイアウト要素" 。
  • ② 初期値: row ⇔ 位置指定なしのグリッド ，デフォルトでは、 ❶ 行ごとに埋めるで要素を配置します ， 必要に応じて新しい行を追加します ❷。
  • ③ 適用可能な要素: グリッド コンテナ (grid containers)
  • ④ 継承: no ⇔ いいえ， 子要素には自動的に継承されません。

• ⑵ 自動レイアウト要素配置の文法
  • grid-auto-flow: [ row | column ] || dense;
  • 3 つの属性値

• html

<div class="gridcontainer">
    <div class="griditem1 green">one: 不怨天尤人，</div>
    <div class="griditem2 red">two: 不恶语伤人，</div>
    <div class="griditem3 green">three: 群处守嘴，</div>
    <div class="griditem4 red">four: 独处守心。</div>
</div>

• css

/* グリッドコンテナ */
.gridcontainer{
    width: 30%;
    /*height: 500px;*/
    /*height: 500px;*/
    border: solid 5px lightseagreen;
    margin: 10px;
    display: grid;
  grid-template: repeat(4,1fr) / repeat(2,1fr); /*4行2列*/
    grid-auto-flow: row;
    /*grid-auto-flow: row dense;*/
    /*grid-auto-flow: column;*/
    /*grid-auto-flow: column dense;*/


}
/*グリッドアイテム1、列1、行2～5行目の配置位置を指定*/
.griditem1{
    grid-column: 1;
    grid-row: 2/5;
}
/*ネットのアイテム2の配置位置を指定：1～3行目*/
.griditem2{
    grid-row: 1/3;
}
/*グリッド項目*/
.gridcontainer div{
    border: solid 5px #bed5cb;
    margin: 10px;
    padding: 10px;
    font-weight: bold;

}

.green{
    background-color: #c4ffcd;
}
.red{
    background-color: #ffdcdd;
}

• ⑶ 自動レイアウト要素の配置方法の属性値（サンプル画像のコードは上記↑の通り）

  • ① 一行ずつ埋めていく (デフォルト): row

    • ❶ 行ごとに埋める ， 必要に応じて新しい行を追加する ❷ によって要素を配置するための自動レイアウト アルゴリズムを指定します。
      • row も column， も指定されていない場合、デフォルトは row です。
    • なぜ項目 3 が 1 位になったのですか?
      • 左上隅のグリッドに配置できる高さですが、最初の「位置を指定せずに自動レイアウトする要素」なので最前面に配置します。
      • (ここでは dense キーワードは省略されていますが ， デフォルトでは、戻って空白を埋めることはできません ， が、「自動レイアウト要素」は 1 行ずつ配置されているため ， そのため、3 番目の要素はちょうど収まる最初の位置に配置されます， 3 番目の要素は最初の "自動レイアウト要素"， である必要があります。最初の行に入力 ， 項目 1 と 2 は指定された位置にある要素です ， は自動レイアウトの要素ではありません。)
    • 

  • ② 列ごとに入力: column

    • 自動レイアウト アルゴリズムが、❷ 列ごとに埋めていく ， 必要に応じて新しい列を追加することによって要素を配置することを指定します。
    • 最初の位置の埋め戻しはありません。
    • 
    • grid-auto-flow: columnsdens; ⇒ 戻って最初の位置の空白を埋めます。
    • 

  • ③ バックフィル空白の順序が乱れる可能性があります: dense，美 /dens/ ，dense

    • 前の空白を埋め戻す: 自動レイアウト アルゴリズムが ❶ 「密な」スタッキング アルゴリズムを使用することを指定します。少し小さい要素が後で表示された場合、グリッド内の ❶ の前の空白を埋めようとします。 そうすることで、少し大きめの要素によって生じた隙間を埋めてグリッドを可能な限り高密度かつコンパクトにします。しかし同時に、❷の元の順序が崩れる可能性もあります。
      • ⇒ 属性値 dense のみが変更されます ❶ 視覚的な順序 ， により、DOM 属性と要素の実際のレンダリング順序が矛盾します ， アクセシビリティに悪影響します ， は注意して使用する必要があります。
      • デフォルトではギャップは埋め戻されません: 省略した場合、，グリッド内に要素をレイアウトするときに、❷「スパース」アルゴリズムを使用します，レイアウト アルゴリズムは、❷「前方」に移動するだけで、❸戻ってギャップを埋めることはありません。
      • これにより、後の要素によって埋められる隙間が残っている場合でも、すべての AutoLayout 要素 ❹ が「順番に」表示されることが保証されます。

• ⑷ 属性値の値と正当な値

  • 単一の値を受け取ることができます ⇒ キーワード ：row、column，、または dense のいずれか。
  • 2 つの値 ⇒ 2 つのキーワード：row dense または column dense。
  • 法定値 ↓

/* Keyword values */
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;/*Double 値。最初に水平、次に垂直。視覚的な順序は行属性と同じです。 */
grid-auto-flow: column dense;/*倍値、最初は上下、次に左右*/

/* Global values */
grid-auto-flow: inherit;
grid-auto-flow: initial;
grid-auto-flow: unset;

• ⑸ ブラウザによるレイアウト要素の自動配置のサポート
  • 

7. gap (grid-gap) 属性: グリッドの行トラック間隔と列トラック間隔を設定します (短縮属性、グリッド コンテナーに適しています)

• ⑴ グリッドの行間隔と列間隔を設定します:
  • gap 属性は、グリッドの行と列の間の間隔を設定するために使用されます（gutters），この属性は、行間隔 row-gap と列間隔 column-gap の短縮形です。
• ⑵ 属性名の変更/置換: grid グリッド接頭辞を削除します。
  • 最初は grid-gap 属性で定義されていました， 現在は、徐々に gap 属性に置き換えられています， グリッド間の間隔にのみ使用されるわけではないため， 他のコンテンツもこの間隔属性を使用しています， そのため、指定する grid のプレフィックスを削除してください。
  • 2 つのサブプロパティにも同じことが当てはまります， grid のグリッド指定が徐々に削除され、row-gap と column-gap になります。

• ⑶ サブ属性と初期値:

  • ① 行ギャップなし: row-gap: normal ，normal は、デフォルトでは通常ギャップがないことを示します。
  • ② 列追跡間隔なし: column-gap:normal，normal は、デフォルトで間隔がないことを示します。
  • normal属性値: 区間幅を示します。 複数列レイアウトの場合、デフォルトの間隔は ❶ 1em， 他のタイプのレイアウトの場合、デフォルトの間隔は ❷ 0 です。
  • 

• ⑷ 適用可能な要素: (サブ属性 row-gap/ column-gap はこれと同じです)

  • ❶ 複数列要素（multi-column elements）、❷ フレキシブルコンテナ（flexcontainer）、❸ グリッドコンテナ（gridいるコンテナ）
  • 継承：no ⇔ 子要素には自動継承されません。

• ⑸ グリッド間隔の属性値
  • ① 行、列の順、列間隔は省略可能
    • スペースで区切られた row-gap と column-gap の値を表します。
      • 列間隔 column-gap はオプションです。， 欠落している場合は、行間隔 row-gap と同じ値に設定されます。
    • 1 つの値 ， は、行と列の間隔の値が同じであることを意味します。
  • ② 属性値のタイプ: どちらも長さの値 またはパーセンテージ で表すことができます。
    • ❶ 長さの値 :
      • グリッド線間のギャップの幅。
    • ❷ パーセンテージ値<percentage>
      • グリッド線間のギャップ幅，❶グリッドコンテナの割合。
• ⑹ 属性値の構文
  • ① 単一値の構文: grid-gap: 5px; ⇔ グリッド 行と列の間隔は同じ
    • 
  • ② 二重値の構文: grid-gap: 5px 20px;リーダーの間隔とそれに続く間隔 ， 行と列を区切るスペース。
    • 

grid-gap: 5px;/*グリッドの間隔を設定します。行と列の間隔は同じです*/
grid-gap: 5px 20px;/* 最初の行、次に列 */
gap: 10px;
gap: 10px 10%;/* は、grid-gap の構文をオーバーライドします */

• ブラウザによるグリッド間隔のサポート
  • 一部のブラウザは、非標準属性grid-gapを使用して新しい属性gap
  • を使用する必要があります。

7.1 row-gap (grid-row-gap) 属性: 行間のギャップ サイズ

• ⑴ 行間のギャップのサイズを設定(gutter): row-gap

  • gutters， コンテンツ トラックの間隔を示します。
  • トラックの間隔を作成するにはどうすればよいですか?
    • CSS グリッド レイアウトで作成するには、column-gap、row-gap、または gap プロパティを使用します。
  • 属性の置換とプレフィックス: grid-row-gap 属性はもともとグリッド レイアウトで使用されていました ， が、現在はより広範囲で使用されています ， そのため、徐々に row-gap に置き換えられています ， grid のプレフィックスは強調されなくなりました。 ただし、row-gap 属性をサポートしていないブラウザと互換性を保つために、grid というプレフィックスが付いた属性を使用する必要がある場合もあります。

• ⑵ 行間の間隔はプロパティ値を追跡します

  • 長さの値またはパーセント値 (グリッド コンテナを基準とした)
  • 長さの値: row-gap: 10px; / grid-row-gap: 10px;
    • 
  • パーセンテージ値: row-gap: 50%; / grid-row-gap: 50%;
  • 

• クリックしてブラウザの行ギャップのサポートを表示します

7.2 column-gap (grid-column-gap) 属性: 列間のギャップ サイズ

• ⑴ 要素の列間のギャップを設定します (gutter) サイズ: column-gap

  • グリッド レイアウトだけでなく、要素間の間隔を設定します。これは、複数列レイアウトや伸縮性のあるレイアウトにも適用できます。
  • グリッド列トラック間の間隔を設定します
    • column-gap: 10px; / grid-column-gap: 10px;
    • 

• クリックすると、ブラウザの column-gap サポートが表示されます

  • 柔軟なレイアウトではサポート度が悪く、グリッド レイアウトや複数列レイアウトではサポート度が高くなります。

8. Grid-area 属性: グリッド項目を配置する領域 (行と列の開始位置と終了位置) を指定します。

• ⑴ グリッド項目を配置する領域（行と列の開始位置と終了位置）を指定します: grid-area
  • ① 省略形属性: この属性は、grid-row-start、grid-row-end、grid-column-start、および grid-column-end の省略形です。
    • グリッド内のグリッド項目の位置を指定します， したがって、グリッド項目のサイズを指定します。
    • 場所を指定するにはどうすればよいですか?
      • この方法では、行と列の開始行と終了行、行と列のスパン span を指定するか、何も指定しない (デフォルトは自動 auto)， ことで、グリッド レイアウトでグリッド項目が占める領域の位置を指定します。
  • ② サブプロパティと初期値
    • grid-row-start: auto
    • grid-column-start: auto
    • grid-row-end: auto
    • grid-column-end: auto
  • ③ 適用可能なオブジェクト :
    • ❶ グリッド項目 grid items ， ❷ 含まれるブロックはグリッドコンテナの絶対配置ボックスです absolutely-positioned boxes
  • ④ 継承 : no

• ⑵ grid-template-areas 属性と grid-area 属性の違い
  • ① grid-template-areas : 現在のグリッド コンテナを分割します ， コンテナを ❶ いくつかのエリア に分割， し、これらのエリアに ， ❷ グリッド コンテナ という名前を付けます。
  • ② grid-area: ❶ 現在のグリッド アイテムの 領域 ， グリッド アイテムの配置に使用されている ， を ❷ グリッド アイテム に分割します。
  • まず grid-template-areas 属性を使用してエリアを分割し、名前を付ける必要があります。その後、grid-area 属性を使用して、grid グリッドの子にこれらのエリアの指定された部分を使用させることができます。
  • エリア名を使用せずに行行，列行の名前を直接使用してグリッド項目のエリアを分割することもできます。
• ⑶ 属性の文法

<grid-line> [ / <grid-line> ]{0,3}
where 
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

• ⑷ 属性値の数: 1 ～ 4 の属性値のれぞれ grid-row-start, grid-row-end, grid-column-start, および grid-column-end を表します， 属性値のれぞれ &# xff0c; を使用するには、スラッシュ / を使用します。

  • 4 値の文: grid-area: ❶ grid-row-start/ ❷ grid-column-start/ ❸ grid-row-end/ ❹ grid-column-end;
    • 奇数行と偶数列
      • (1,3) 1 番目と 3 缘目の値は行の开始と结步を秀します。
      • (2,4) 2 番目と 4 缘目の値は列の始まりと头を表します。
    • 最初に始まり、終わりの後です。 最初の 2 つの値 - 最初の宝の値 - 2 引き目の値は開始位置です - 後の 2 つの終了位置を移動します。
      • 4 つの 値が指定されている機会 ， grid-row-start を初期の値に設定 ， の値に設定 ， set grid-column n-end は 4 番目の値に指定されます。
  • 3 値の構成: 4、4=2、をします。
    • grid-column-end の 4 目の値を单した機会 ，grid-column-start が <custom-ident> の機会 ，then 4=2=<custom-ident>= <custom-ident>，次に 4=2=<custom-ident>&# 61;ライン名またはエリア名を指定します& # xff0c;次に、grid-column-end をこの <custom-ident> に設定します。 外 ， 2 も省略ささ & & ， そのそ、2 = 4 = 初期値 =
    • & lt; ， は、ユーザー定義の &= カスタムテキスト列 ， を意味しますます。 ここには、されたグリッドフィールド名またはカスタムの行行と列行の名前が入ります。
  • 2 値の文: 3 を省略しました ，
  • grid-row-end が 3 Fanmu の値の場合があります ， 上記のレコード じ，3=1=<custom-ident>& #61; ， ;1=3=初期値=
  • 1 つの値の文: grid-column-start を無視する場合、つまり 2 目の値が無視される ，grid-row-start が <custom-ident> の場合， 4 つの値すべてがその値に设计されるます。 それ以外の場合は、， auto に設定します。
    • デメリット, ，attribute value 1 つだけ，ということは, 4 つの値が同じである，1=2=3=4=<custom-ident>，または 1=2=3=4 1;<コード>自動。

• 各属性値の型

  • ① スパンは 1+自動設定: grid-area: auto; 初期値 ，
  • ② 指定した領域名またはカスタム名の行行/列行：：grid: <custom-ident>
  • ③ デフォルトまたは指定された名前の n 番目の行行/列行を指定します: grid: <integer> && <custom-ident>?
    • 整数: n Banmuのグリッドラインを、指定されたグリッド項目の位置を指定し、「します」を使用します。
      • 値 0 の整数が無効です。
    • 負の整数 : 負の整数 ，
    • 名前を设计する: ? はオプションを意味します ， 名前が <custom-ident>，ントします。 その名前を持つ行が十に移统しない呢は、この位置を见付けるために、すべての黑黙の nagriddo 行がその名前を持つものとみなされます。
  • ④ スパンする行数/列数を指定します: grid: span && [ <integer> || <custom-ident> ]
    • グリッドスパン: span グリニドアイテライッジのグリッド空间の反応するエッジが反対側のエッジからn行になるように、グリニドアイテムの設定にグリッドスパンガが提供されることをします。
    • 指定された名前が <custom-ident>， その名前を持つ十分な行が組織しない实常は、このスパンを计算するために、検索方向に反応するのくかすべての黑黙的グリッドのにあるすべての黑黙的グリッドラインがその名前を持つとみなされます。

• 指定されたグリッド項目の位置、行2～4の際、行3～4の際を指定します

  • grid-area: 2/3/4/4;
  • (1,3) 商人の目の値は行行の開始と头の设计をします ，
  • 
  • ，column=d フィールドが 2 行項目から始まりまる列を指定します: grid-area: 2/d;
    • 
  • c という名前の界にグリッド プロジェクトを設定します: grid-area: c;
    • 
  • グリッド項目の行と列の開始位置のスパンをします: grid-area: 2/1/span 2/span 3;
    • 

8.1 Grid-row-start 属性: グリッド項目が配置される行の開始位置

• グリッド行内のグリッド アイテムの開始位置を指定します。グリッド レイアウトに行線、スパン span、または何も指定しない (デフォルトは自動 auto)， ことで、グリッド領域内のグリッド アイテムの開始エッジを指定します。

• 初期値: auto

• 適用可能なオブジェクト:

  • ❶ グリッド アイテム grid items ， ❷ 含まれるブロックはグリッド コンテナの絶対配置ボックスです absolutely-positioned boxes

• 継承 : no

• 属性の構文

<grid-line>
where 
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

/* グリッドコンテナ */
.gridcontainer{
    width: 30%;
    /*height: 500px;*/
    /*height: 500px;*/
    border: solid 5px lightseagreen;
    margin: 10px;
    display: grid;
    grid-gap: 5px;/*グリッドの間隔を設定します。行と列の間隔は同じです*/
    /* 明示的な行トラックと列トラックを設定します */
    grid: repeat(3,100px)/1fr 1fr 1fr;
}
/* 2 番目のグリッド項目 */
.griditem2{

    grid-row-start: auto;
}

• 値の例
  • grid-row-start: auto ⇒ 自動配置，つまり、デフォルトの配置位置，デフォルトのスパンは 1 です。
  • 

• grid: <custom-ident>; グリッド項目 2 を c 領域の開始行から開始するように設定します
  • 「-start」という名前の指定された行がある場合、最初のそのような行が開始位置としてグリッド項目に提供されます。
  • c-start = 2 行目 line ⇒ start line of item 2 = line 2
  • 名前付きラインの暗黙的自動生成: 名前付きグリッド領域は暗黙的に名前付きラインを自動生成します。
    • 明示的な c-start 行はありません ，c 領域のみに名前が付けられます ，しかし、c 領域の開始行は暗黙的に c-start 行として指定されます ，明示的に指定される前に別の行 c-start がない限り ，この領域の開始行は c-start。
  • 

/* グリッドコンテナ */
.gridcontainer{
    grid: repeat(3,100px)/1fr 1fr 1fr;
    grid-template-areas: "a b b" "a c c" "a d d";
}
.griditem2{

    /*grid-row-start: auto;*/
    grid-row-start: c;
}

• n 行目を開始行として指定します: grid: <integer> && <custom-ident>?
  • n 番目の行ラインを指定できる理由は、グリッドが番号順に行ラインの名前を自動的に生成するためです。 名前付けには、正のシーケンスと負の逆シーケンスの 2 種類があります。1,2,3...n.. または -n,...-3,-2,-1，したがって、ここでの整数値は正の整数または負の整数にすることができます。ただし、0 はできません。0 という名前の行がないためです。
  • グリッド領域の名前が <custom-ident>， の場合、その名前の行のみがカウントされます。 その名前を持つ行が十分に存在しない場合は、この位置を見つけるために、すべての暗黙的なグリッド線がその名前を持つものとみなされます。
  • 
  • 開始行の行数を設定: grid-row-start: 3; ⇔ 3行目から開始
    • 
  • 指定された領域の行ラインを設定: grid-row-start: 2 c;
    • ここで行の領域名が指定されています ，c， が、2 行目 ，、つまり c 領域の 3 行目 ， からではなく、c 領域の行名が明示的に指定されていないため、暗黙的な行 ， の 2 行目 (つまり 6 行目) から始まります ， ; 検索範囲内にないのでしょうか?
    • 
• 行間の行数を設定します: grid-row-start: span && [ <integer> || <custom-ident> ]
  • 整数 <integer>， を省略した場合、デフォルトは 1 です。 負の整数または 0 は無効です。
  • 項目 2 は 2 つの行トラックにまたがります: grid-row-start: span 2;
  • 
• 負の値の開始行を設定: grid-row-start: -1;
  • 
  • grid-row-start: -2;
  • 

8.2 Grid-row-end 属性: グリッド項目が配置される行の終了位置

• 属性はグリッド行内のグリッド項目の終了位置を指定します
• 初期値: auto = スパン数は 1， で、自動的に配置されます。
• 適用可能なオブジェクト:
  • ❶ グリッド項目 grid items ， ❷ 含むブロックはグリッドコンテナの絶対位置ボックスです absolutely-positioned boxes
• 継承 : no
• プロパティ構文

<grid-line>
where 
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

• 終了位置を 3 行目に指定します: grid-row-end:3;
  • 
• スパン 3 行を指定: grid-row-end: span 3;
  • 

8.3 Grid-column-start 属性: グリッド項目が配置される列の開始位置

• 属性は、グリッド列内のグリッド項目の開始位置を指定します
• 属性構文

<grid-line>
where 
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

• グリッド項目を列 3 から開始するように設定します: grid-column-start: 3;
  • 
• スパンを 2 列に設定します: grid-column-start: span 2;
  • 

8.4 Grid-column-end 属性: グリッド項目が配置される列の終了位置

• CSS プロパティは、グリッド列内のグリッド項目の終了位置を指定します
• プロパティ構文

<grid-line>
where 
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

• 終了位置を 4 列目に設定します: grid-column-end: 4;
  • 
• スパン数を 3 列として指定します: grid-column-end: span 3;
  • 

9. Grid-column 属性: グリッド項目列の開始位置と終了位置を一元的に定義します (短縮属性)

• column，美['kɑləm]， column

• グリッド項目のサイズと位置を指定: グリッド項目列の開始位置と終了位置を一元的に定義します (短縮プロパティ)

• 短縮プロパティ: grid-column は grid-column-start と grid-column-end

• サブプロパティと初期値:

  • デフォルトの自動配置: grid-column-start: auto
  • デフォルトの自動配置: grid-column-end: auto

• 初期値: auto = スパン数は 1 で、自動的に配置されます。

• 継承: no

• 属性値の構文 :

  • 属性値の数: 1 ～ 2
  • 2 つの <グリッド線> 値が指定されている場合、，それらはスラッシュ「/」で区切られます。， まず列の開始位置を設定し、次に列の終了位置を設定します。

<grid-line> [ / <grid-line> ]?
where 
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]
 

• 列 3 から開始: grid-column: 3;

  • 
  • 列 2 から開始，列 4 で終了: grid-column: 2/4;
  • 

• grid-column のブラウザ サポート

  • 

10.grid-row 属性: グリッド項目が配置される行の開始位置と終了位置を一元的に定義します (短縮属性)

• 短縮属性: grid-row は、grid-row-start と grid-row-end の短縮属性です。
  • グリッド項目のサイズと位置を指定できます。
  • サブ属性と属性値
    • grid-row-start: auto
    • grid-row-end: auto
• プロパティ値の構文

<grid-line> [ / <grid-line> ]?
where 
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]
 

• グリッド行の属性値
  • 属性値の数: 1 ～ 2
  • <グリッド線> の値が 2 つ指定されている場合は、，最初にグリッド線の開始位置を設定し、次にグリッド線の終了位置を設定します。
  • 2 行目から開始: grid-row: 2;
  • 
  •  
  • 1 行目から開始， 3 行にわたって: grid-row: 1/span 3;
  • 
  • c エリアの開始行 ， から d エリア end の終了行まで: grid-row: c/d;
    • 

11. グリッド レイアウトの CSS データ型と関数

11.1 グリッド レイアウトに関連する新しい CSS データ タイプ

• グリッド レイアウトに関係する CSS データ型
  • <flex>データ型
  • 表す: グリッドの可変長: 空間を比例的に分割します。
    • <flex> CSS データ型は、グリッド （grid） コンテナ内の ❶ の可変長を表します。 grid-template-columns、grid-template-rows および関連する属性で使用されます。
  • 可変長 = 数値 +fr:
    • <flex>データ型は、<number> 数値の後に単位 fr が続いたものです。 すべての CSS サイズと同じです。単位と数値の間にスペースはありません。
• グリッド関連の特別な長さの単位: 空間を比例的に分割する長さの単位
  • レールは、任意の長さの単位を使用して定義できます。
  • グリッド固有の長さの単位: 新しい fr 単位 ⇔ は、グリッド コンテナ内の ❶ で利用可能なスペースの一部を表します。
    • 利用可能なスペースの量に応じて伸縮する同じ幅の 3 つのトラックを作成します。
      • Grid-Template-Columns: 1FR 1FR 1FR;
    • スコア ユニットの軌道の絶対サイズを混合します。固定幅は利用可能なスペースから取得されます + 残りのスペースは 3 つに分割されます ， 2 つの伸縮可能なサイズのトラックが比例して割り当てられます。
      • grid-template-columns: 500px 1fr 2fr;
  • ブラウザのサポート
    • 
• 有効なデータ

1fr    /* 整数を使用します */
2.5fr  /* 浮動小数点を使用します */

11.2 グリッド レイアウト関連の CSS 関数

⑴repeat()関数: トラックの繰り返し回数を設定します

• repeat() 関数のブラウザ互換性
• 構文

repeat(auto-fill|auto-fit|positive-integer,<linenames>?<track-size><linenames>?)
<track-size> = <length> | %  | <flex> | min-content | max-content | auto|  minmax(min,max) | fit-content()`
 

• パラメータ

  • ① 繰り返し回数: positive-integer
    • 繰り返す回数がわかっている場合は、特定の正の整数を直接設定して繰り返し操作を実行します。
      • grid-template-rows:repeat(4,1fr) ⇔ grid-template-rows:1fr 1fr 1fr 1fr;
  • ② 繰り返し回数を自動計算: auto-fill ⇒ 繰り返し回数がわからない場合繰り返し: つまり、列または行の数がわからない場合、グリッド レイアウト内の各サブアイテムのサイズに応じて、繰り返す必要がある繰り返しの数を自動的に計算できます。

    • グリッドをオーバーフローさせない最大繰り返し数: グリッド コンテナの行または列に関連付けられた軸が特定のサイズを持つ場合、繰り返し回数は、グリッド コンテンツがグリッド コンテナからオーバーフローしない最大の正の整数になります。

      • 自動繰り返し+幅と高さを設定+迷惑なキーワード auto: 繰り返し関数 repeat() ， を使用し、繰り返し回数を自動的に計算する場合，、つまりパラメータが auto-fill/auto-fit の場合， 高さまたは幅の値を設定， し、repe The at() 関数は auto と併用できません ， 繰り返し回数を自動計算する場合に便利です ， 繰り返し回数が指定されている場合 ， 自動繰り返しでない場合 ， repeat() 関数は、auto と併用できます。

    • コンテナの高さが設定されていない場合、行トラックは 1 回だけ繰り返されます: grid-template-rows:repeat(auto-fill,150px) 100px;

      • 

    • コンテナの高さが設定されます: grid-template-rows:repeat(auto-fill,150px) 100px;+height : 500px;

      • 歩行軌道は高さ内にあります ， 自動的に繰り返されます
      • 
    • ③ 自動計算繰り返し回数 + 結合空気軌道 : Auto-Fit
      • 空のトラックを結合: auto-fit は auto-fill と同じように動作します。違いは、，グリッド項目が配置された後，空の繰り返しトラックは折りたたまれることです。
      • 空のトラック: グリッド アイテムが配置されていないか、またがっていないトラックを指します。 (すべてのトラックが空の場合、すべてのトラックが折りたたまれます。)
        • 折り畳まれたトラック ， は、単一の固定トラック サイズ ❶ 0px， と、その両側に間隔を置いて配置された ❷ 折り目があるとみなされます。
      • 例 1: auto-fill が自動的に入力される場合 ，グリッド コンテナのサイズが非常に大きい場合，最後に空のグリッド スペースが存在します：
        • グリッド コンテナ幅 900px，grid-template-columns:repeat(auto-fill,150px);
        • 
      • auto-fit 自動適応時，グリッド コンテナのサイズが大きすぎる場合，最終的に空のグリッドがいくつか存在し、幅 0 の 1， にマージされます。 ⇒ グリッド コンテナのサイズに余裕がない場合， 2 つのパフォーマンスは同じです。
        • 
      • 自動繰り返しトラックの数を見つけるために、ユーザー エージェントはトラック サイズをユーザー エージェントによって指定された値 (例: 1px) に制限し、ゼロ除算を回避します。

  • 自動繰り返し専用キーワード: auto-fill を使用して自動入力する場合、，repeat() 関数は auto と一緒に使用できません。これは、auto では特定のサイズを決定できないため、繰り返しの数が不確かであるためです。 長さ/パーセント値とともに使用できます。 ただし、繰り返し回数が 1、2、3... という特定の数値の場合、， は auto と併用できます。

    • 次の書き込みは無効です：

  .container {
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) auto; /* 無効な書き込み */
      grid-template-columns: repeat(3, minmax(100px, 1fr)) auto; /*効果的な文章*/
  }
  
  

  • 法定価値

  /* track-repeat values */
  repeat(4, 1fr)
  repeat(4, [col-start] 250px [col-end])
  repeat(4, [col-start] 60% [col-end])
  repeat(4, [col-start] 1fr [col-end])
  repeat(4, [col-start] min-content [col-end])
  repeat(4, [col-start] max-content [col-end])
  repeat(4, [col-start] auto [col-end])
  repeat(4, [col-start] minmax(100px, 1fr) [col-end])
  repeat(4, [col-start] fit-content(200px) [col-end])
  repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
  repeat(4, [col-start] min-content [col-middle] max-content [col-end])
  
  /* auto-repeat values */
  repeat(auto-fill, 250px)
  repeat(auto-fit, 250px)
  repeat(auto-fill, [col-start] 250px [col-end])
  repeat(auto-fit, [col-start] 250px [col-end])
  repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
  repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])
  
  /* fixed-repeat values */
  repeat(4, 250px)
  repeat(4, [col-start] 250px [col-end])
  repeat(4, [col-start] 60% [col-end])
  repeat(4, [col-start] minmax(100px, 1fr) [col-end])
  repeat(4, [col-start] fit-content(200px) [col-end])
  repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])
  
  

  • grid-template-columns: repeat(2, 50px 1fr) 100px;

    • 

  • トラックリピートの例

  • トラックのリピート回数を指定: repeat(回数，トラックサイズ) p>

    • ① 単一トラックを何度も繰り返す: repeat() 関数を使用して、トラック リストの一部または全体を繰り返します。
      • 例 1: grid-template-columns: 1fr 1fr 1fr; ⇔ grid-template-columns:repeat(3, 1fr);
      • 開始トラックは 20px， その後、1fr の 6 トラックが繰り返されます ࿰ c; 最後に追加します20px トラック。
        • 例 2: grid-template-columns: 20pxrepeat(6, 1fr) 20px;
    • ② マルチトラックを何度も繰り返す: マルチトラック モードで繰り返すトラックのリストを作成します: グリッドには合計 10 トラックが含まれます ， 1 1f The r トラックの後に 1 2fr トラックが続きます ， パターンは 5 回繰り返します。 複数のトラックはスペースで区切られます。
      • grid-template-columns:repeat(5, 1fr 2fr);
    • ③ 複数の関数を同時に使用する
      • 最初の 2 つの列は 20% を占め、最後の 2 つの列は 30% を占めます: grid-template-columns:repeat(2,20%)repeat(2,30%) ;
      • 
    • ④ ，トラックを繰り返すときにグリッドラインに名前を付けます
      • grid-template-columns:repeat(3,[col1-start] 1fr [col2-start]);+ グリッド項目 2 の設定 grid-column-start:col1-start;
      • 

  • 使用上の注意

    • repeat() 関数は、明示的な行と列のトラックを設定する grid-template-columns および grid-template-rows 属性でのみ使用されます。暗黙的なトラック属性では使用できません。
    • Firefox ブラウザの場合 ，repeat(auto-fill, ...) と repeat(auto-fit, ...) 2 つのキーワードは現在、列の grid-template-columns 属性の使用のみをサポートしています ， 他のブラウザでは基本的に通常どおり使用できます。

⑵ minmax(min, max) 関数: 軌道サイズ値の範囲を制限する

• 最小値と最大値を同時に設定する: minmax(min, max)， は、現在のトラック サイズが最小値 min と最大値 max の間の値であることを示します。
• 構文

minmax(min, max)
minmax( [ <length> | <percentage> | min-content | max-content | auto ] , [ <length> | <percentage> | <flex> | min-content | max-content | auto ] )
 

• パラメータ
  • ① 長さの値 ， パーセント値 ， または ↓ にすることができます。
  • ② auto は min のパラメータ位置に表示されます ，、効果は min-content と同等です， max のパラメータ位置に表示される場合 ， 効果は max-content と同等です。
    • min-content と max-content の具体的な意味については、[CSS3 の 4 つのアダプティブ キーワード: available、max-content、min-content、fit-content] を参照してください。

.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

• minmax(150px, 1fr) の意味は、各列の最小幅が 150 ピクセル ， 最大値が 1fr ， つまり等しい幅であることです。
  • コンテナの現在の幅が 500 ピクセルであると仮定します ， この時点で、 ， は 3 つの列に分割されている ， と結論付けられ、各列の幅は 166.67px になるはずです。
  • 各列の最小幅要件は 150 ピクセルであるため ， 少なくとも 500/150 列が必要です ， つまり 3.33 列 ， つまり 3 列 ， 1fr の最大幅値制限により、最小値要件を満たすことができます ， c; 均等分割を意味します& #xff0c;したがって，各列の幅は同じサイズの 3 列になります， 500px/3=166.67px，この値は、最小制約と最大制約を同時に満たすことができます。
  • 
• 使用上の注意:
  • ① minmax(min, max) 内，min の計算値が max より大きい場合，最大値が無効であるため、max の値は無視されます。
  • ② <flex>可変長のデータ型は min のパラメータとして使用できません，比例配分のためか、長さが可変の場合，最小値はありません。
  • ③ minmax() 関数は次の 4 つの CSS プロパティにのみ存在します：
    • 明示的な行と列のトラック サイズを設定します: grid-template-columns / Grid-template-rows
    • 暗黙的な行と列のトラック サイズを設定します: grid-auto-columns / Grid-auto-rows

⑶ fit-content(limit) 関数: サイズはコンテナのスケーリングに応じて変更できます ， 最小値は制限されません ， 最大サイズは特定の制限値を超えません

• fit-content()関数ブラウザの互換性

• 関数: 要素のサイズをコンテナのズームに合わせて拡大縮小します ， 最小サイズは auto 値で変更され、制限はありません ， 最大サイズは特定の制限を超えてはなりません。 制限値は ， 最大コンテンツ max-content と制限値 limit の 2 つのうちの 1 つを選択し、， どちらか小さい方， の制限になります。 : fit-content()

  • ① 構文: fit-content( [ <length> | <percentage> ] )
    • min(minimum, max(limit, max-content)) と同等 (仕様より) ⇒ 本質的に計算された minmax(auto, max-content) と minmax(auto, limit) の小さい値
    • ⇒ fit-content(limit) と同等です = min(min(auto, limit), min(auto, max-content))
  • ② fit-content() ࿰ c;auto で制限値 limit を指定することを意味します，コンテンツの最大コンテンツ max-content の最小値を取得します。
    • パラメータ auto の可変性
      • ❶ コンテナの幅が非常に大きい場合，autoデフォルト値は非常に大きくなります，最大コンテンツ max-content よりも大幅に大きい場合， 最小値は最大コンテンツ max-content (テキスト行など) または指定された制限値 limit のいずれかになります，より小さいです。
      • ❷ ズームコンテナの場合 ， コンテナの幅が小さくなります ，auto の値はコンテナの変化に応じて小さくなります ，auto 値が最小の場合 ， 最小のコンテンツのサイズになる可能性があります min-content (漢字の幅など ， 単語の幅) ÿ 0c; または直接 完全に見えなくなります。
      • 例 1: 明示的な列トラックが grid-template-columns: 80px fit-content(200px); に設定されたコンテナ
        • コンテナは水平方向に調整できるように設定されています: resize:horizo​​ntal;+ overflow:hidden;
        • 2 番目の列で使用される fit-content() 関数 ，maximum limit=200px。
      • ❶ max-content > limitの場合:
        • コンテナが縮小すると ， 2 列目のコンテンツは ， 完全に消えるまで縮小します ， コンテナのスペースが大きくなると ， 2 列目の幅は増加します ， しかし、幅が 200px に達すると増加しなくなり、， 200px のままになります。
        • 
      • ❷ max-content <limitの場合:
        • 幅が max-content のサイズに達すると、増加しなくなり、最大コンテンツ値の位置に留まります。 この例では、テキストの 1 行は折り返されません，最大コンテンツ値 max-content = 290px、制限がある場合は max-content が小さくなります，max-content が制限値として使用されます。
        • grid-template-columns: 80px fit-content(400px);，最大値は max-content の幅を超えません
    • min() : 値の大小を比較し、最小のものを取り出すために使用されます。
    • max(): 値の大小を比較し、最大のものを取り出すために使用されます。
  • ③ fit-content(limit) のパラメータ タイプ: 制限値 limit は、長さの値 またはパーセンテージの値 をパラメータとして受け入れます。
    • パーセンテージ値: 指定された軸の利用可能なスペースに対する相対的なパーセンテージ。
    • グリッド プロパティでは、❶ 列トラックのグリッド コンテナのインライン サイズと、❷ 行トラックのグリッド コンテナのブロック サイズに相対します。
      • それ以外の場合は、書き込みモードに応じて、レイアウト ボックスの利用可能なインライン サイズまたはブロック サイズを基準とします。
  • ④ fit-content(limit)関数の適用可能な属性:
    • ❶ 行と列のトラック サイズを明示的に設定します: grid-template-rows/grid-template-columns。
    • ❷ 暗黙的な行と列のトラック サイズを設定します: grid-auto-rows/ grid-auto-columns。
    • ❸ repeat() 関数の 2 番目のパラメータ ， でトラック サイズ <track-size> として使用されます。
    • ❹ は、レイアウト ボックス サイズ (box size) のさまざまな幅，高さ属性にも使用できます。
    • 幅 ， 高さ ， 最小幅 ， 最小高さ ，

/* 长度值 length values */
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)

/* 百分比值 percentage value */
fit-content(40%)