网格布局

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 没有定义网格区域
• 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)