grid布局指南

注：前方高能，文章略长，希望你可以耐心阅读下去

属性列表
    display:grid | inline-grid | subgrid
    grid-template-columns: ... | ...;
    grid-template-rows: ... | ...;
    grid-template-areas: " | . | none | ..." "..."
    grid-column-gap:
    grid-row-gap:
    grid-gap:
    justify-items: start | end | center | stretch;网格子项的内容和列轴对齐，对所有的网格子项都有用
    align-items: start | end | center | stretch;网格子项的内容和行轴轴对齐，对所有的网格子项都有用
    justify-self: start | end | center | stretch
    align-self: start | end | center | stretch
    justify-content: start | end | center | stretch | space-around | space-between | space-evenly ;
    align-content: start | end | center | stretch | space-around | space-between | space-evenly;
    grid-auto-columns:
    grid-auto-rows:
    grid-auto-flow: row | column | row dense | column dense
    grid: none | / | [ [ / ] ];
    grid-column-start: | | span | span | auto ;
    grid-column-end: | | span | span | auto ;
    grid-row-start: | | span | span | auto ;
    grid-row-end: | | span | span | auto ;
    grid-area: | / / / ;

1.display:grid | inline-grid | subgrid

    grid    块级的网格容器
    inline-grid  内联的网格容器
    subgrid   继承父级网格容器的行和列的大小的网格容器

2.grid-template-columns: ... | ...;

3.grid-template-rows: ... | ...;

      必填，定义网格单元的宽高
           单位可以为长度(px/em/rem/vw/vh)、百分比、网格中自由空间的份数(fr)
      可选，网格线名称
           可选择任意名字，若未显示设定时，以数字表示

实例：

效果图.png

4.grid-template-areas: " | . | none | ..." "..."

      在grid-area中指定的网格区域名字
    .          表示一个空的网格单元
    none        没有网格区域被定义

效果图.png

5.grid-column-gap:

6.grid-row-gap:

7.grid-gap:

    grid-column-gap、grid-row-gap 指定网格线的大小即网格子项之间的间距
    grid-gap   是grid-column-gap和grid-row-gap的简写，若只有一个值，则两者值一样
     长度值

效果图.png

8.justify-items: start | end | center | stretch;

    网格子项的内容和列轴对齐，对所有的网格子项都有用
    start  内容和网格区域的左边对齐
    end   内容和网格区域的右边对齐
    center  内容和网格区域的中间对齐
    stretch  填充整个网格区域的宽度（默认值）

9.align-items: start | end | center | stretch;

    网格子项的内容和行轴轴对齐，对所有的网格子项都有用
    start   内容和网格区域的顶部对齐
    end    内容和网格区域的底部对齐

    center   内容和网格区域的中间对齐
    stretch  填充整个网格区域的高度（默认值）

justify-items.png

align-items.png

10.justify-self: start | end | center | stretch

    网格子项的内容以列轴对齐，应用在单个网格子项的内容

    start   让内容在网格区域左对齐
    end    让内容在网格区域右对齐
    center   让内容在网格区域中间对齐
    stretch  填充着整个网络区域的宽度（默认值）

11.align-self: start | end | center | stretch

    网格子项的内容以行轴对齐，应用在单个网格子项的内容
    start   让内容在网格区域上对齐
    end    让内容在网格区域下对齐
    center   让内容在网格区域中间对齐
    stretch  填充着整个网络区域的宽度（默认值）

justify-self.png

align-self.png

12.justify-content: start | end | center | stretch | space-around | space-between | space-evenly ;

    如果用像px非弹性单位定义的话，总网格区域大小有可能小于网格容器，这时候你可以设置网格的对齐方式（垂直于列网格线对齐）
    start     左对齐
    end      右对齐
    center     居中对齐
    stretch    填充网格容器
    space-around 在每个网格子项中间放置均等的空间，在始末两端只有一半大小
    space-between 两边对齐，在每个网格子项中间放置均等的空间，在始末两端没有空间
    space-evenly  网格间隔相等，包括始末两端

13.align-content: start | end | center | stretch | space-around | space-between | space-evenly;

    如果用像px非弹性单位定义的话，总网格区域大小有可能小于网格容器，这时候你可以设置网格的对齐方式（垂直于行网格线对齐）
    start     顶部对齐
    end      底部对齐
    center     居中对齐
    stretch    填充网格容器
    space-around 在每个网格子项中间放置均等的空间，在始末两端只有一半大小
    space-between 上下对齐，在每个网格子项中间放置均等的空间，在始末两端没有空间
    space-evenly  在每个网格子项中间放置均等的空间，包括始末两端

justify-content.png

align-content.png

14.grid-auto-columns:

15.grid-auto-rows:

    自动生成隐式网格轨道（列和行），当你定位网格项超出网格容器范围时，将自动创建隐式网格轨道
      可以是一个长度(px/em/rem/vw/vh)、百分比、网格中自由空间的份数（fr）

实现过程.png

16.grid-auto-flow: row | column | row dense | column dense

    未设置网格项的位置时，这个属性用于控制网格项怎样排列
    row   按照行依次从左到右排列
    column   按照列依次从上到下排列
    dense  按先后顺序排列

    
    
    
    
    



    

        
3
        
4
        
5
        
6
        
7
    

效果图.png

grid-auto-flow设为column

效果图.png

17.grid: none | / | [ [ / ] ];

    grid是一种简写形式

18.grid-column-start: | | span | span | auto ;

19.grid-column-end: | | span | span | auto ;

20.grid-row-start: | | span | span | auto ;

21.grid-row-end: | | span | span | auto ;

    用于定义网格项的位置
     |  可以是一个数字以适用被标记了数字号的网格线，或者是一个名字以适用命名了的网格线
    span     子项将跨越指定数字的网格轨迹
    span      子项将跨越指定名字之前的网格线
    auto>         自动布局，自动跨越或者默认跨越一个。

.item-a{     
    grid-column-start: 2;     
    grid-column-end: five;     
    grid-row-start: row1-start     
    grid-row-end: 3  
}

item-a.png

.item-b{     
   grid-column-start: 1;     
   grid-column-end: span col4-start;     
   grid-row-start: 2     
   grid-row-end: span 2  
}

item-b.png

.item-c{     
   grid-column: 3 / span 2;     
   grid-row: third-line / 4;  
}

item-c.png

22.grid-area: | / / / ;

    ：选择的名字

     / / / 可以是网格线的数字或名字

.item-d{     
    grid-area: 1 / col4-start / last-line / 6  
}

item-d.png

妈呀，终于看完并梳理一遍了，这内容忒多了些吧
文章借鉴于https://www.imooc.com/article/43143
希望也能帮助到你