Keep

    Search by

    CSS-Grid

    7/5/2021, 10:23:00 AM

    Grid

    // 定义 layout
    * display: grid/inline-grid;
    
    // 定义 grid 如何布局
    * grid-template-rows: 50px 100px;
    
    // 1fr 1fr 2fr; Fraction 相对于剩余空间;
    // minmax(100px, auto);
    // repeat(4, 100px);
    // repeat(4, 1fr);
    // repeat(auto-fit, minmax(100px, 1fr))  -> 根据 minmax 设定, 尽可能多的生成轨道, 但不会有空 grid
    // repeat(auto-fill, minmax(100px, 1fr)) -> 根据 minmax 设定, 尽可能多的生成轨道(grid)
    // 1fr auto; -> 右侧根据内容自适应宽度, 左侧占额外空间.  grid 在父级能定义子元素尺寸. flex 需要在子元素上定义
    // 1fr minmax(200px, auto)
    * grid-template-columns: 100px 200px;
    // grid-template = grid-template-rows / grid-template-columns;
    
    // 支持 line 命名
    * grid-template-rows:    [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
    * grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];
    
    // 定义 areas, 给 grid 命名 - 先命名再划分 grid ?!
    * grid-template-areas
    
    // 定义 grid-item 排列方向
    // dense 尽可能填充空白算法
    * grid-auto-flow: row[default]/column dense;
    
    // 定义(grid-template-* 未定义的) grid 尺寸, 根据 space/grid-item 自动计算.
    // 即, 使用轨道, 那么轨道就存在
    * grid-auto-rows: 100px;
    * grid-auto-columns: 100px;
    
    // 定义 grid-item 之间间距 gap
    * grid-row-gap: 10px;
    * grid-column-gap: 10px;
    // 简写
    * grid-gap = grid-row-gap grid-column-gap;
    
    // 对齐方式
    // 定义 grid-item 在 InlineAxis 方向中的位置.
    // value: auto/normal/start/end/center/stretch/baseline/first baseline/last baseline
    * justify-items
    // 定义 grid-item 在 BlockAxis 方向中的位置
    * align-items
    // 简写(flex/grid)
    * place-items: align-items justify-items;
    
    // 定义 space 如何处理
    // value: normal/start/end/center/stretch/space-round/space-between/space-evenly/baseline/first baseline/last baseline
    * justify-content
    * align-content
    // 简写
    * place-content: align-content justify-content

    Grid-Item

    // 定义 grid-item 位置. 索引从 1 开始
    // 支持使用 line 名称定义.  ex: grid-row-end: row-2-end;
    // start/end 支持负值
    // start 可以比 end 大,  会自动交换 start/end;
    * grid-row-start
    * grid-row-end
    * grid-column-start
    * grid-column-end
    
    // 简写. grid-row = grid-row-start grid-row-end;
    * grid-row
    * grid-column
    // ex:
    // grid-row: 1/3;
    // grid-row: 2; => 2/3
    
    // 支持 grid 合并(span)写法.
    // span 会影响 start/end 的值;
    * grid-row: 2 / span 3;
    
    // 简写. grid-area = grid-row-start/grid-column-start/grid-row-end/grid-clumn-end;
    * grid-area
    
    // 定义 grid-item 在 row 方向中的位置.
    // value: auto/normal/start/end/stretch/baseline/first baseline/last baseline
    * justify-self: center
     // 定义 grid-item 在 column 方向中的位置
    * align-self: center
    
    // grid 情况下, 可直接使用 z-index
    * z-index
    
    // 定义 grid-item 顺序. 支持负值
    * order

    Ref

    Tag:
    CSS
    工作日常

    Redky

    Redky,生活在北京(北漂),程序员,宅,喜欢动漫(海贼王)。"年轻骑士骑马出城,不曾见过绝望堡下森森骸骨,就以为自己可以快意屠龙拯救公主。"