空格键拖动视窗   

鼠标滚轮放大缩小   

Grid Layout

• Grid 布局
  • grid (缩写)
    • grid-template-areas 指定网格区域（类似命名）
      • usage:
      • hit: 如果某些区域不需要利用，则使用”点”（.）表示,注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名 start，终止网格线自动命名为区域名-end,比如，区域名为 header，则起始位置的水平网格线和垂直网格线叫做 header-start，终止位置的水平网格线和垂直网格线叫做 header-end
    • grid-template (缩写) 使用 / 隔开
      • usage: repeat(4,25%) / repeat(4, 25%)
      • grid-template-columns 定义列和列宽
      • grid-template-rows 定义行和行高
    • 设置自动创建的列宽行高默认值
      • grid-auto-columns
      • grid-auto-rows
    • grid-auto-flow 设置排列顺序
      • 值: column(先列) row(先行) 加 dense (尽可能铺满,紧凑)
  • 设置对齐方式
    • place-items (缩写) 设置单元格对齐方式
      • usage: place-items: align-items justify-items
      • justify-items 水平
      • align-items 垂直
    • place-content (缩写) 设置整个网格的对齐方式
      • usage: place-content: align-content justify-content
      • justify-content 水平
      • align-content 垂直
    • place-self (缩写) 单独设置单元格对齐方式
      • usage: place-self: align-self justify-self
      • justify-self 水平
      • align-self 垂直
  • gap (缩写)
    • usage: gap: 20px 20px
    • row-gap 行间距
    • column-gap 列间距
  • grid-area (缩写)
    • usage: grid-area: [网格区域 | 网格名称] || grid-area: row-start / column-start / row-end / column-end
    • grid-column (缩写)
      • grid-column-start
      • grid-column-end
    • grid-row (缩写)
      • grid-row-start
      • grid-row-end
  • Tool
    • repeat 函数 简化重复操作
      • usage: repeat(3,33.33%)
    • auto-fill 关键字 自动填充
    • fr grid 特有单位
      • usage: grid-template-columns: 1fr 2fr, 宽度分为两列,前列占 1/3,后列占 2/3
      • hit: 可以与 px rem em vw vh 等单位混合使用,先计算绝对单位,最后才计算 fr
    • auto 和平常的 auto 使用方式一样,由浏览器自动设置
    • minmax 函数 限定值的范围只能在两者之内
      • usage: grid-template-columns: 1fr 1fr minmax(100px, 1fr);
      • hit: 上面代码第三列表示宽不小于 100px,不大于 1fr
    • 网格命名
      • usage: 使用方括号,如: grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]
• classic-compact