Open zhanhongtao opened 7 years ago
// 容器上属性 - 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
参考