loading
  思维导图

此页面不支持移动端

空格键拖动视窗   

鼠标滚轮放大缩小   

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
评论