有关网络布局概念，和容器相关内容可以查看我的另一篇文章 css中的网格布局之容器篇

网格布局项目所支持的属性

grid-row-start,grid-row-end,grid-column-start,grid-column-end

这四个属性分别指定某个项目行开始和结束于哪条网格线，列开始和结束于哪条网格线。如以下代码

.grid-container{
    display: grid;
    grid-template-columns:50px 50px;
    grid-template-rows: 50px 50px;
}

建立了一个两行两列的网格布局，此时在竖向位置会产生代号分别为1，2，3的三条网格线，横线位置同样会产生代号为1，2，3的三条网格线。假如此时我们想某个项目占从第一行到第三行以及第一列到第三列的轨道，可以通过以下代码

.grid-item{
     grid-row-start: 1;
     grid-row-end: 3;
     grid-column-start: 1;
     grid-column-end: 3;
 }

这四个属性指定负数，表示从从由grid-template-rows,和grid-template-columns显示定义的末尾开始计数（在网格布局中，如果指定的项目start和end所划定的轨道区域超出了由grid-template-rows,和grid-template-columns定义的区域，会隐式地创建网格）。如

.grid-item{
     grid-row-start: -1;
     grid-column-start: -1;
     grid-row-end: -3;
     grid-column-end: -3;
 }

表示从到倒数第一条横线网格线到倒数第三条横线网格线以及倒数第一条竖向网格线和倒数第三条竖向网格线所组成的轨道区域。

利用此特点可以很快写出跨越整个网格的区域，如跨越整个竖向区域

.grid-item{
     grid-column: 1 / -1
 }

grid-row,grid-column

grid-row和grid-column分别是grid-row-start,grid-row-end,grid-column-start,grid-column-end的简写，其语法为

grid-row:1 / 2
grid-column: 1 / 2 分别表示项目的轨道由从第一条横向网格线到第二条横向网线和第一条竖向网格线到第二条竖向网格线组成的区域构成。

默认跨度为1

如果仅仅给出grid-row-start,grid-column-start而没有给出grid-row-end,grid-column-end,则项目默认的跨度为1，如以下代码

.grid-item{
 grid-row-start: 2;
 grid-column-start: 2;
}

表示项目占据从第二条横向网格线到第三条横向网格线以及第二条竖向网格线到第三条竖向网格线之前组成的轨道区域。也可以写成

.grid-item {
 grid-row: 2;
 grid-column: 2;
}

通过span指定跨度

除了“起始线与结束线”的定位方法，你还可以使用“起始线与跨越轨道数量”的定位方法。如

.grid-item {
 grid-row: 2 / span 2;
 grid-column: 2 /span 2;
}

表示从第二条横向网格线到第四条横向网格线，和第二条竖向网格线和第四条竖向网格线组成的轨道区域。

当先指定结束线，再指定开始线的跨度时，会按照结束线往开始线的方向跨越，如

.grid-item {
   grid-column-end: 4;
   grid-column-start: span 2;
}

表示在竖向从第四条网格线到第二条网格线所组成的区域

grid-area

grid-area是grid-row-start,grid-column-start,grid-row-end,gird-column-end的简写，如

.grid-item{
 grid-area:1 / 1 / 2 / 2
}

表示由第一条横向网格线，第一条竖向网格线，第二条横向网格线，第二条竖向网格线所组成的轨道区域。

z-index

网格布局中允许将不同的项目放在相同的位置，如

    .item-1{
      grid-row-start: 1;
      grid-row-end: 3;
      grid-column-start: 1;
      grid-column-end: 3;
      background: yellow;
    }
    .item-2{
      grid-row-start: 1;
      grid-row-end: 3;
      grid-column-start: 1;
      grid-column-end: 3;
      background: red;
    }

此时后出现的item-2会覆盖先出现的item-1。我们可以通过提高z-index让item-1覆盖item-2,如

    .item-1{
      grid-row-start: 1;
      grid-row-end: 3;
      grid-column-start: 1;
      grid-column-end: 3;
      background: yellow;
      z-index: 1;
    }

algin-self

设置某个项目在块轴上的对齐方式

justify-self

设置某个项目在行轴上的对齐方式

css网格布局之项目篇

网格布局 项目 所支持的属性