Grid
// 定义 layout
* display: grid/inline-grid;
// 定义 grid 如何布局
* grid-template-rows: 50px 100px;
// 1fr 1fr 2fr; Fraction 相对于剩余空间;
// minmax(100px, auto);
// repeat(4, 100px);
// repeat(4, 1fr);
// repeat(auto-fit, minmax(100px, 1fr)) -> 根据 minmax 设定，尽可能多的生成轨道，但不会有空 grid
// repeat(auto-fill, minmax(100px, 1fr)) -> 根据 minmax 设定，尽可能多的生成轨道 (grid)
// 1fr auto; -> 右侧根据内容自适应宽度，左侧占额外空间。grid 在父级能定义子元素尺寸。flex 需要在子元素上定义
// 1fr minmax(200px, auto)
// https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content_function
// min-content, max-content, fit-content(n)
// 1fr 类似 flex: auto[0 1 auto];
* grid-template-columns: 100px 200px;
// 简写
// grid-template = grid-template-rows / grid-template-columns;
// https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template
* grid-template: repeat(auto-fit, minmax(100, 1fr)) / 120px 240px;
// 支持 line 命名
* grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
* grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];
// 定义 areas, 给 grid 命名 - 先命名再划分 grid ?!
* grid-template-areas
// 定义 grid-item 排列方向
// dense 尽可能填充空白算法
* grid-auto-flow: row[default]/column dense;
// 定义 (grid-template-* 未定义的) grid 尺寸，根据 space/grid-item 自动计算。
// 即，使用轨道，那么轨道就存在
// https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns
* grid-auto-rows: 100px;
* grid-auto-columns: 100px;
// gap
// 定义 grid-item 之间间距 gap
// https://developer.mozilla.org/zh-CN/docs/Web/CSS/gap
// 下面语法升级
/*
* grid-row-gap: 10px;
* grid-column-gap: 10px;
// 简写
* grid-gap = grid-row-gap grid-column-gap;
*/
* column-gap: 10px;
* row-gap: 10px;
// 简写
* gap: 10px;
// 对齐方式
// 定义 grid-item 在 InlineAxis 方向中的位置。
// value: auto/normal/start/end/center/stretch/baseline/first baseline/last baseline
* justify-items
// 定义 grid-item 在 BlockAxis 方向中的位置
* align-items
// 简写 (flex/grid)
* place-items: align-items justify-items;
// 定义 space 如何处理
// value: normal/start/end/center/stretch/space-round/space-between/space-evenly/baseline/first baseline/last baseline
* justify-content
* align-content
// 简写
* place-content: align-content justify-content
// grid 简写
// https://developer.mozilla.org/en-US/docs/Web/CSS/grid
Grid-Item
// 定义 grid-item 位置。索引从 1 开始
// 支持使用 line 名称定义。ex: grid-row-end: row-2-end;
// start/end 支持负值
// start 可以比 end 大，会自动交换 start/end;
* grid-row-start
* grid-row-end
* grid-column-start
* grid-column-end
// 简写。grid-row = grid-row-start grid-row-end;
* grid-row
* grid-column
// ex:
// grid-row: 1/3;
// grid-row: 2; => 2/3
// 支持 grid 合并 (span) 写法。
// span 会影响 start/end 的值;
* grid-row: 2 / span 3;
// 简写。grid-area = grid-row-start/grid-column-start/grid-row-end/grid-clumn-end;
* grid-area
// 定义 grid-item 在 row 方向中的位置。
// value: auto/normal/start/end/stretch/baseline/first baseline/last baseline
* justify-self: center
// 定义 grid-item 在 column 方向中的位置
* align-self: center
// grid 情况下，可直接使用 z-index
// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context
* z-index
// 定义 grid-item 顺序。支持负值
* order
Ref
