浅析 CSS Grid 布局(下)

五、 项目属性

• grid-column-start / grid-column-end grid-row-start / grid-row-end
  • 用来指定item的具体位置, 根据在哪根网格线

上述代码中grid-column-start: 1表示的是从第一个垂直网格线进行排列

​ grid-column-end:3 表示的是到第3根网格线结束排列

grid-row-start和grid-row-end的原理也是一样的，

所以1这个item，变为了行2列2的单元格

注意:

1. 这是单元格的属性，不要写到container上去了

2. 注意如果end操作了列数，其就等于列数

   grid-column-start: 1;
   /*
    一共只有3列，所以grid-column-end的最大值应该为3
    但是这里设置成了5，所以多出的列的个数会被忽略
    所以在这里grid-column-end:5; 会被解析为 grid-column-end:3;
   */
   grid-column-end:5;
   

3. 网格线默认是从1开始计算的，不是0

4. 

   span表示的是横跨, 所以 span 2 等价于 横跨2列/行 等价于 合并2列/行

   grid-column-start:span 2 === grid-column-end: span 2

• grid-column属性是grid-column-start和grid-column-end的合并简写形式
• grid-row属性是grid-row-start属性和grid-row-end的合并简写形式
• grid-column: 1 / 3; === grid-column-start: 1; grid-column-end: 3;
• grid-column: span 2; === grid-column-start:span 2; grid-column-end: span 2;
• grid-column: span 数字; 如果这个数字大于列数，那么这个数字就会被解析为列的最大个数

• grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置
• grid-area: / / / ;

• 指定项目放在哪一个区域

• grid-area后面根组名，注意组名不要加引号

• justify-self / align-self / place-self

  • justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目 (水平方向)

  • align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目 (垂直方向)

  • place-self属性是align-self属性和justify-self属性的合并简写形式 place-self: center center;