Grid布局基础入门

Grid布局基础入门

一、容器属性

1.display属性

（1）display:gird ：容器元素是块级元素
（2）display:inline-grid :容器元素是内联元素

2、grid-temlate-rows/cloumns

（1） grid-temlate-rows：定义每一行的行高
（2）grid-temlate-columns：定义每一行的列宽

这里有一个容器，容器里面有9个元素，给整个父容器设置 display:grid

grid布局对于空间的分配也是挺灵活的可以采用多种方式进行分配，固定单位、百分比、auto、fr
1.固定单位
设置css样式：grid-template-rows: 150px 150px 150px; grid-template-columns: 150px 150px 150px
这里就相当与给父元素设置了三行三列，每列的高度为150px，每行的高度为150px

也可以用这种方式给每一根网格线取名字（同一根网格线可以有多个名字）

      grid-template-rows: [r1] 150px [r2] 150px [r3 r13] 150px [r4];
      grid-template-columns: [c1] 150px [c2] 150px [c3] 150px [c4];

2.fr ：表示为片段，用来分配剩余可以用空间
而且值得注意的是，这里我们可以使用单位的混合使用

      grid-template-columns: 50px 1fr 50px;
      grid-template-rows: 1fr 2fr 20%;

3.auto :使用时，会优先计算(获取必要的最小空间)，在去计算fr

      grid-template-columns: auto 1fr 150px;
      grid-template-rows: 1fr 2fr 1fr;

这里的150px，就是固定宽度，然后计算auto，它的宽度就是字体宽度，最后1fr独占剩下的全部

（3）repet(次数，大小) grid布局也提供了简写方案
1.如果想要实现三行三列的布局则，用可以用这种写法

      grid-template-rows: repeat(3, 150px);
      grid-template-columns: repeat(3, 150px);

2.当单元格的大小固定，容器大小不确定时，如果希望每一行（或每一列）容纳尽可能多的单元格，可以使用 auto-fill 自动填充
此时，子元素会尽量的沾满父元素的空间

      grid-template-columns: repeat(auto-fill, 150px);
      grid-template-rows: repeat(3, 150px);

（4）minmax(min,max): min <= 取值 <= max

3、grid-auto-flow

（1）grid-auto-flow有四个值：
1.row(默认值)
2.column(先填满第一列，再放入第二列)
3.row/cloumn dense：在稍后出现较小的项目时，尝试填充网格中较早的空缺。用的很少，而且布局也会很乱，可以自己去尝试一下

4、grid-auto-rows/grid-auto-columns

1grid-auto-rows定义浏览器自动创建的多余网格的行高
2.grid-auto-columns 定义浏览器自动创建的多余网格的列宽

      grid-template-columns: repeat(3, 150px);
      grid-template-rows: repeat(3, 150px);
      grid-auto-rows: 200px;

5、5.row-gap 属性，column-gap 属性，gap 属性

1.row-gap 设置行间距
2.column-gap 设置列间距

row-gap: 20px;
column-gap: 20px;

只表示行于行，列于列之间的间距
3.gap 是 row-gap 和 column-gap 的简写形式

6、grid-template-areas 属性

就是给每个区域取名字，对应上图就是，1对应a，2对应b，3对应c，4对应d 、、、、、、
如果某些区域用不上，不想给他取名字，那就用一个点来代替
区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为 区域名-start，终止网格线自动命名为 区域名-end

      grid-template-areas:
        'a b c'
        'd e f'
        'g h i';

7.align-items 属性，justify-items 属性，place-items 属性

1.align-items: stretch（默认值）| start | end | center;
2.justify-items: stretch（默认值）| start | end | center;
3.place-items: align-items justify-items;
是对于每一个项目进行操作，项目是不一定沾满整个网格的，这里的值可以结合 flex 布局来理解

8.align-content 属性，justify-content 属性，place-content 属性

1.align-content: stretch（默认值） | start | end | center | space-around | space-between | space-evenly;
2.justify-content: stretch（默认值） | start | end | center | space-around | space-between | space-evenly;
3.place-content: align-content justify-content;

9、grid-template 属性，

1.grid 属性
grid-template 是 grid-template-columns、grid-template-rows 和 grid-template-areas 这三个属性的合并简写形式
2.grid 是 grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow 这六个属性的合并简写形式