css grid - Githubissues

// 容器上属性 - container.
// 定义 grid
display: grid | inline-grid | subgrid(*)

// 定义行/列
grid-template-columns
grid-template-rows
* 支持 fr 单位(剩余空间) ex: 1fr
* 支持定义 line 的名称, 语法为 [name], 支持使用空格分割的多个名字[name1 name2], ex: grid-template-columns: [first] 40px 50px [end]
* 支持使用 repeat(times, 30px [col-start]) 语法重复定义
* 支持 repeat(auto-fill, 100px) 自适应格子数
* 可忽略部分 line 命名的定义
* 支持 minmax 函数 - 定义最小值和最大值

// 定义区间 - 四边形
grid-template-areas: <grid-area> | . | none
// 备注: . 可以理解成没有名字
// ex:
grid-template-areas:
  "header header header header"
  "main main . main"
  "footer footer footer footer";
// 疑问: 名字是否可以忽略?

// 缩写
// grid-template-rows grid-template-columns grid-template-areas
grid-template: none | subgrid | <grid-template-rows>/<grid-template-columns>
// ex:
.container {
  grid-template:
    [row1-start] 25px "header header header" [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}
// =>
.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas:
    "header header header"
    "footer footer footer";
}

// 定义格子行/列间隔
grid-column-gap: value;
grid-row-gap: value;

// 缩写
// grid-gap: grid-row-gap grid-column-gap
// ex:
grid-gap: 10px;
// =>
grid-gap: 10px 10px;

// 定义 row-axis 对齐方式
justify-items: start | end | center | stretch

// 定义 column-axis 对齐方式
// @NOTE: 会改变 grid 的尺寸
align-items: start | end | center | stretch

// 总格子尺寸占不满 container 时,
// 格子的对齐方式
justify-content: start | end | center | stretch | space-around | space-between | space-evenly
align-content: start | end | center | stretch | space-around | space-between | space-evenly

// 定义生成格子的尺寸
grid-auto-columns: value;
grid-auto-rows: value;

// 格子排列方向
grid-auto-flow: row | column | dense(自动填充空白位置算法)
// ex:
// grid-auto-flow: row dense;
// grid-auto-flow: column dense;

// 缩写 grid.
grid:
  grid-template-rows,
  grid-template-columns,
  grid-template-areas,
  grid-auto-rows,
  grid-auto-columns,
  grid-auto-flow;

// 格子 - 子元素
// 伪元素会当做子元素对待
// 定义格子的起始线
grid-column-start
grid-column-end
grid-row-start
grid-row-end
// value: <line> | span <number> | span <name> | auto
// span <number> 合并<number>个格子
// span <name> 合并格子到 <name>
// 备注 1: <number> 基数从 1 开始, 并且支持负值
// 备注 2: 当 start > end 时, 会交换两个的值

// 缩写形式
grid-column: grid-column-start / grid-column-end
grid-row: grid-row-start / grid-row-end
// value: <start-line> {n} / span <value> | <start-line> {n} / <end-line>
// 支持使用 area-start | area-end
// 支持 auto 关键字, 从默认位置开始定义
// ex:
// grid-column: span 3 / -1;
// grid-column: span 2 / 1;
// grid-column: span 2 / 2;

// 定义所占区间
grid-area: <area-name> | <row-start> / <column-start> / <row-end> / <column-end>

// 格子内, 在 row-axis/column 方向上对齐方式
justify-self: start | end | center | stretch
align-self: start | end | center | stretch

// 支持使用 order 定义顺序
order: 1

// 其他:
// 当格子已被占用再设置时会怎么样?
// 当没有定义小格子位置时, 会如何排版? 是不是在已排版的格子后面?

// 标准定义的支持动画属性(浏览器不一定支持)
grid-gap
grid-row-gap
grid-column-gap
grid-template-columns
grid-template-rows
zhanhongtao / blog

css grid #270

参考
