CSS-Grid

7/5/2021, 2:23:00 AM 3 min read

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)
* grid-template-columns: 100px 200px;
// grid-template = grid-template-rows / grid-template-columns;

// 支持 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 自动计算.
// 即, 使用轨道, 那么轨道就存在
* grid-auto-rows: 100px;
* grid-auto-columns: 100px;

// 定义 grid-item 之间间距 gap
* grid-row-gap: 10px;
* grid-column-gap: 10px;
// 简写
* grid-gap = grid-row-gap grid-column-gap;

// 对齐方式
// 定义 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-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
* z-index

// 定义 grid-item 顺序. 支持负值
* order

Ref

Tag:: CSS