CSS Grid 网格布局

在逆战班的学习中，这个我周学会了Grid 网格布局操作。首先，它分为两种一种是作用在容器上的，另一种是作用在子项上的。

（1）作用在容器上的：

        display : grid

        grid-template-columns : 设置列数

  grid-template-rows : 设置行数

       fr单位

       repeat()方法

       注：网格中提供了一个新的单位：fr ( 比例单位 )

   grid-template-areas : 划分区域的

       注：区域必须是矩形。

   grid-template:复合写法依次是grid-template-rows,

gragrid-template-columns, grid-template-areas

   可以写为  grid-template:

            "a1 a1 a1" 1fr(其中引号里的a1等为自己起的名字)

            "a3 a3 a2" 1fr

            "a3 a3 a2" 1fr

            /1fr 1fr 1fr;

   grid-column-gap : 列的间距

   grid-row-gap : 行的间距

   grid-gap : 复合写法依次是grid-row-gap ,grid-column-gap

 justify-items : 子项的水平居中方式和align-items : 子项的垂直居中方式，它们的属性值一样，包括

  默认 :  stretch 默认值，拉伸。表现为水平或垂直填充。

         start：左侧或顶部对齐

         center：水平或垂直居中对齐

         end：底部对齐或右侧对齐

   place-items : 复合写法依次是 align-items, justify-items

   justify-content : 整体网格的水平对齐方式和align-content : 整体网格的垂直对齐方式，它们的属性值包括：

   默认：stretch默认值，拉伸。表现为水平或垂直填充。

        start：左侧或顶部对齐

        center：水平或垂直居中对齐

        end：底部对齐或右侧对齐

       space-between：表现为两端对齐

       space-around：享有独立不重叠的空白空间

       space-evenly：平均分配空白空间

  place-content : 复合写法依次是 align-content, justify-content

（2） 作用在子项上的：

   grid-area : 找指定的区域

        1.对应网格的名字

        2.写对应的线的数字 eg:grid-area : 1 / 3 / span 2 / 4;

       分别对应grid-row-start / grid-column-start / grid-row-end / grid-column-end

   grid-column-start  水平方向上占据的起始位置

   grid-column-end   水平方向上占据的结束位置

   grid-row-start   垂直方向上占据的起始位置

   grid-row-end    垂直方向上占据的结束位置

  注：只有在grid-column-end和 grid-row-end 中可以设置span操作。span去设置的不是结束位置，而是个数。正常数字是位置，加上span是个数。

   eg:grid-column:3 / 4;

       分别对应grid-column-start / grid-column-end

    grid-row:1 / span 2;

       分别对应 grid-row-start / grid-row-end

    justify-self：单个网格元素的水平对齐方式

    algin-self：单个网格元素的垂直对齐方式

    place-self：align-self和justify­-self的缩写