CSS grid 翻譯

屬性：

grid 網格容器簡寫屬性，用於設置所有網格容器屬性。用於設置所有網格屬性（顯式：網格模板行、列和區域）、（隱式：網格自動行、列和流動模式）。
```
  /* 初始值 */
  grid-template : none
  grid-auto-rows : auto
  grid-auto-columns : auto
  grid-auto-flow : row
  grid-gap : 0
```
- grid-auto-columns 定義隱式欄軌道。
- grid-auto-rows 定義隱式列軌道。
- grid-auto-flow 定義網格元素排列流動模式，此屬性控制自動填補算法的工作方式。 grid-auto-flow: column | row | row dense | column dense;
- grid-gap 網格系統間隔，grid-row-gap 和 grid-column-gap 的縮寫
  - grid-column-gap
  - grid-row-gap
- grid-column 定義欄屬性縮寫
  - grid-column-start 欄起點：線的名稱 or 位置編號
  - grid-column-end 欄終點：線的名稱 or 位置編號 or 跨越的軌道數量
- grid-row
  - grid-row-start
  - grid-row-end
- grid-area 用行和列的起、始線，可定義一個跨網格的區域。
- grid-template 簡寫屬性，可定義網格列，行和區域。

屬性值

Global 全域 values

inherit | initial | unset

Keyword 關鍵字 values
- none：無
- auto：自動
- min-content：以此元素內容能縮短的最短的長度為依據。
- max-content：以此元素內容能容納的最大的長度為依據。
- auto-fill：自動填滿
- auto-fit：自動符合
CSS basic data types

Formal syntax - 複合格式

<line-names> 網格線名稱
```
<line-names> = '[' <custom-ident>* ']'
```

<grid-line> 網格線

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

軌道列表

<track-list> = [ <line-names> ? [ <track-size> | <track-repeat> ] ] + <line-names> ?

自動軌道列表

<auto-track-list> = [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?

Formal syntax - 函式

minmax() 最小 / 最大

minmax( min, max ) 
/* 
 * min, max : <length> | <percentage> | <flex> | auto | max-content | min-content */

https://developer.mozilla.org/en-US/docs/Web/CSS/minmax

fit-content() 符合內容

fit-content( [size] )
/* 
 * size : <length> | <percentage> */

＝ min( max-content, max(auto, argument) ) ＝ auto (minmax(auto, max-content))，除了轨道大于 auto 的最小值時，會被锁定為參數。

repeat() 重複

grid-template-columns 、 grid-template-rows 屬性的值。

repeat( [times] , size )
/* 
 * times：[ <positive-integer> | auto-fill | auto-fit ] , <track-list> 
 * size：<track-list> */

e.g. grid-template-rows


none | <track-list> | <auto-track-list>
// 無 或 <軌道串>       或 <自動軌道串>

/* where */
<track-list> 
    = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?    
    //[ 一個 <格線名>?或沒有. [ <軌道寬度> | <軌道重複數> ] ] + <格線名>?

<auto-track-list> 
    = [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat>   
    // [ <格線名>? [ <硬性的尺寸> | <固定數量的重複> ] ]*有 0 或多個. <格線名>? <自動的重複>
    //  or
    = [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
    // [ <格線名>? [ <固定尺寸> | <固定數量的重複> ] ]* <格線名>?

/* where */
<line-names>                   // <格線名>
    = '[' <custom-ident>* ']'  // 自定義字串 e.g. [myId]

<track-repeat>                                                                           // <軌道的重複>
    = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )   // repeat( <正整數>, [ <格線名>? <軌道尺寸>]+有 1 至多次.
 + <格線名>? )

<fixed-repeat>                                                                           // <固定數量的重複>
    = repeat( [ <positive-integer> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )   // repeat( <正整數>, [<格線名>? <固定尺寸>]+ <格線名>? )

<auto-repeat>                                                                            // <自動的重複>
    = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? ) // repeat( [<自動填滿> | <自動符合>], [<格線名>? <固定尺寸>]+ <格線名>? )

<track-size>                                           // <軌道尺寸>
    = <track-breadth>                                  // <軌道格式>
    | minmax( <inflexible-breadth> , <track-breadth> ) // minmax(<硬性的幅度>, <軌道格式>)
    | fit-content( [ <length> | <percentage> ] )       // fit-content( <距離單位幅度> )

<fixed-size>                                           // <硬性的尺寸>
    = <fixed-breadth>                                  // <距離單位幅度>
    | minmax( <fixed-breadth> , <track-breadth> )      // minmax( <距離單位幅度>, <軌道格式> )
    | minmax( <inflexible-breadth> , <fixed-breadth> ) // minmax( <硬性的幅度>, <距離單位幅度> )

/* where */
<track-breadth>               // <軌道格式>
    = <length> | <percentage> | <flex> | min-content | max-content | auto

<inflexible-breadth>          // <硬性的幅度>
    = <length> | <percentage> | min-content | max-content | auto

<fixed-breadth>               // <距離單位幅度>
    = <length-percentage>     // <距離、百分比單位>
    = <length> | <percentage> // <距離單位> | <百分比單位>

CSS Grid