Keep

CSS-Grid

7/5/2021, 10:23:00 AM

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)
* 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 尺寸, 根据 space/grid-item 自动计算.
// 即, 使用轨道, 那么轨道就存在
// ex: grid-auto-rows: 100px;
* grid-auto-rows: 100px;
* grid-auto-columns: 100px;

// 定义 grid-item 排列方向
// dense 尽可能填充空白算法
* grid-auto-flow: row[default]/column dense;

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

// 对齐方式
// 定义 grid-item 在 row 方向中的位置.
// value: auto/normal/start/end/center/stretch/baseline/first baseline/last baseline
* justify-items
// 定义 grid-item 在 column 方向中的位置
* align-items

// 定义 space 如何处理
// value: normal/start/end/center/stretch/space-round/space-between/space-evenly/baseline/first baseline/last baseline
* justify-content
* align-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(grid-item)
 // 定义 grid-item 在 column 方向中的位置
* align-self(grid-item)

// grid 情况下, 可直接使用 z-index
* z-index

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

Ref

Tag:
CSS
工作日常

Redky

Redky,生活在北京(北漂),程序员,宅,喜欢动漫(海贼王)。"年轻骑士骑马出城,不曾见过绝望堡下森森骸骨,就以为自己可以快意屠龙拯救公主。"