CSS布局神器：grid

• 如果说以前的文档流布局是一维布局的话，那么grid我们可以把它理解成二维布局
• 以前的布局是从上到下，从左到右的文档流布局，也就是BFS
• grid将改变这种布局方式
• grid的基本概念其实就是在父元素身上挖坑，然后用子元素去填。

1 创建单元格

1.1 行列

1. display: grid;
2. 先分行，后分列
   1. grid-template-columns
   2. grid-template-rows

grid-template-columns: 100px 40% 100px;
grid-template-rows: 100px 100px;

3. 中间设置百分比课随父级自由变换，两边像素单位则不变

1.2 特殊单位fr

• grid-template-columns：1fr 1fr 1fr; 这样便是把box分成了三列
• 每一列的宽度都占box宽度的3分之一，为什么是三分之一呢？ 因为有3个fr

1.3 重复值函数：repeat(4, 1fr);

前面写重复次数，后一个值为每个轨道的宽度

1.4 auto-fill 关键字

• 在单元格的大小是固定的，但是父级的大小不确定的时候，如果希望父级每一行或每一列容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

• 意思就是当父级宽度改变后，内部的行列会自适应改变，类似于浮动
• 当不确定多少行列的时候可用这个关键字

1.5 auto 关键字

• 表示由浏览器自己决定宽度或者高度

        display: grid;
       	width: 1000px;
        grid-template-columns: 200px auto 200px;

1.7 grid-auto-columns 和 grid-auto-rows

• 设置网格之外的元素的高度

2 单元格合并 (设置给子集)

网格线

2.1 合并列

• grid-column-start: 1; 开始合并的列 从父级最左边开始算
• grid-column-end: 4; 结束合并的列
• 复合：grid-column: 2 / 4; 开始合并的列和结束合并的列

合并行

• grid-row-start: 1;开始合并的行
• grid-row-end: 4;结束合并的列
• grid-row: 2 / 4; 开始合并的列和结束合并的列

span 关键字

• 定义要合并的数量
• 如: grid-column: 2 / span 3; 从第二列开始合并，往后合并三列

grid-template-areas属性（用命名的方式合并行与列）

.container {
        .main {
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            grid-template-areas: 'a s d'
                'a e f'
                'a h i';
        }

        .item {
            border: 1px solid #0c5460;
            text-align: center;
        }

        .item::after {
            content: attr(data-num);
            font: 20px/24px '微软雅黑';
        }

        .item::before {
            content: '';
            display: inline-block;
            vertical-align: middle;
            font: 20px/24px '微软雅黑';
            height: 100%;
        }

合并三个后要删去多余的两个

    <div class="main">
        <div class="item" data-num="1"></div>
        <div class="item" data-num="2"></div>
        <div class="item" data-num="3"></div>
        <div class="item" data-num="4"></div>
        <div class="item" data-num="5"></div>
        <div class="item" data-num="6"></div>
        <div class="item" data-num="7"></div>
        <div class="item" data-num="8"></div>
        <div class="item" data-num="9"></div>
    </div>

合并同名区域，其他区域将往后挤(设置给子集)

        .item:nth-child(3) {
            grid-area: a;
        }

3 单元格对齐方式

3.1 justify-items 和 align-items 针对单行

调整子元素在主轴方向上的对齐方式

• start
• end
  
• center
  

3.2 justify-content 和 align-content 针对多行

• 定义元素对齐方式：
  • normal
  • start ：从父级左边开始，类似于normal
  • end ：从父级右边开始，相当于整体有浮动（不改变顺序）
  • center ：水平居中
  • space-around ：环绕
    
  • space-between ：左中右
    
  • space-evenly：类似于around，间距更大
    
• 复合：place-content
• align-content 同理，设置上下对齐方式

3.3 grid-auto-flow 定义元素的排列方式

默认是： row （横向排列意为：先行后列）
可设置：column 纵向排列

            grid-template-columns: repeat(5, 100px);
            grid-template-rows: repeat(2, 100px);
            justify-content: center;
            align-content: center;
            grid-auto-flow: column;

4 grid-gap 用来创建行和列之间的空隙

• 接受两个值 第一个是行与行之间的间距 第二个是列与列之间的间距

• 如果只给一个值，那么行与列之间的间距是一样的

• grid-row-gap

• grid-column-gap

            grid-gap: 8px 4px;