Grid Layout
基本概念
- 容器(container)
- 网格项(items)
- 网格线(虚拟并不存在于 HTML 中)
- 网格轨道(Grid Track)
- 单元格(Grid Cell)
- 网格区域(Grid Area、合并的单元格)
- 单位
- fr(按比例分配区域)
- gr(官方暂不支持)
Grid
- display(grid|inline-grid|subgrid)
- column、float、clearn、vertical-align 属性无效
- display: subgrid(浏览器不兼容)
- grid-template(简写、不应简写属性)
- grid-template-columns(定义网格列)
- 使用单位较自由：fr、px、auto、百分比等等
- grid-template-rows(定义网格行)
- 使用 auto 较为常见
- grid-template-areas(网格区域、定义网格模版)
- grid-area-name 设置网格区域的名称
- . 点号代码一个空网格单元
- none 没有定义网格区域
- grid-template-columns(定义网格列)
- gap(单元格间距、网格轨道)
- line-size(长度值且有一个)
- grid-column-gap(列)
- grid-row-gap(行)
- grid-gap(简写、先行后列)
- items
- justify-items(沿行轴方向对齐网格内容、start/end/center/stretch)
- align-items(沿列轴方向对齐网格内容、start/end/center/stretch)
- place-items(简写、先列后行)
- content
- justify-content(沿行轴对齐网格内网格、start/end/center/stretch/space-around/space-between/space-evenly)
- place-content(简写、先列后行)
- grid-auto(自动生成网格轨道/隐式网格轨道)
- grid-auto-columns
- grid-auto-rows
- repeat(次数, 值)
- fit-content()内容适配、绝对单位、百分比
- minmax(mini, max)长宽范围
- auto-fill 以网格项为准自动填充
- auto-fit 以网格容器为准自动填充
- start/end
- grid-column-start
- grid-column-end
- grid-row-start
- grid-row-end
- line 数字指代相应编号网格线、也可用名称
- span 网格项将跨域制定数量的(或名称)网格轨道
- z-index 堆叠顺序
- grid-column & grid-row 简写用 / 隔离值
- grid-area
- name
- row-start / column-start / row-end / column-end
- self
- justify-self(沿行轴对齐内容、start/end/center/stretch)
- align-self(沿列轴对齐内容、start/end/center/stretch)