Grid

创建布局

  1. grid-template-columns: 20% 20% 20% 20% 20%;

    还可以使用百分比以外的数值来标定宽度,例如:px, em和Grid特有的单位fr(按比例分配格点时使用,每个fr为一份)

    使用fr作为单位时,fr的宽度将在最后计算,grid-template-columns: 50px 1fr 1fr 1fr 50px;

  2. grid-template: <row> / <column>是上述代码的简写

指定行与列

使用负数来标定行或列时,-1是指逆序第一条网格线。

  1. grid-column-start, grid-column-end结合使用时,渲染结果是[两者中较小值, 较大值)(即夹在初始格线与停止格线之间的部分)
  2. span可用于在给出了startend时,指定格子拓展的长度
  3. grid-column: <start> / <end>;是上述语法的简写

类似的还有grid-row的使用。

  1. grid-area: <row-start> / <column-start> / <row-end> / <column-end>;是上述语法的简写

未指定grid-column-start等位置元素时,元素按源代码中出现的顺序占据一个格点,使用order: <number>来改变默认排序,类似于z-index

辅助计算

  1. repeat(5, 20%)展开为20% 20% 20% 20% 20%

这个参数顺序挺满足英语简单部分前置的风格的。


最后更新: 2020年1月12日