2020-02-24（grid）

简介：

• grid可以说是web布局的最新解决方案，也可以说是目前最好的解决方案。

• 有一个东西叫做文档流，也就是说我们的页面其实是从上到下从左到右一点一点堆积起来的。不过有了grid之后这个情况将会发生改变，如果说以前的文档流布局是一维布局的话，那么grid我们可以把它理解成二维布局。

• 首先，grid的基本概念其实就是在父元素身上挖坑，然后用子元素去填。

怎样使用grid

基础属性

display：grid;

先分行，再分列

grid-template-columns
grid-template-rows

grid-tamplate-columns 用来规定把父级的空间分割成多少列以及每一列的宽度，（column 也就是列的意思）

grid-template-columns: 100px 200px 300px;

grid-template-rows，原理和columns 一样

grid-template-rows: 100px 200px 300px;

组合起来：

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

可以看到在grid-template-columns里面我用到了40%, 没错了，在这里面可以用百分比，也可以使用其他的单位，说白了这里是为了设置子元素的宽度 所以只要是宽度可以用的值在这里都是可以使用的。

grid-template /*复合样式*/

grid-template：<‘grid-template-rows’> / <‘grid-template-columns’>

特殊单位：fr

它是一个相对单位，比如上面grid-template-columns的值也可以这样设置： grid-template-columns：1fr 1fr 1fr; 这样便是把box分成了三列，并且每一列的宽度都占box宽度的3分之一，为什么是三分之一呢？ 因为有3个fr。

重复值函数： repeat(4, 1fr);
利用repeat函数来创建多个重复的列 第一个值是多少列 第二个值是每一列的宽度
minmax(100px,auto);

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

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

auto 关键字
auto关键字表示有浏览器自己决定宽度或者高度

grid-template-columns: 100px auto 100px;

grid-auto-columns属性和 grid-auto-rows属性
用于设置网格之外的元素的宽高

单元格合并

概念：网格线（虚拟的其实并不存在）

合并列：
grid-column-start: 1; 开始合并的列 从父级最左边开始算 如果有四列子元素，那么父级的最右边是5
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属性（用命名的方式合并行与列）
网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

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

  .item{
    border: 1px solid #0c5460;

    &:nth-child(1){
      grid-area: a;
    }
  }
}

单元格对齐方式

grid-auto-flow 定义元素的排列方式
默认是： row （横向排列意为：先行后列）
可设置：column 纵向排列

justify-content 和 align-content 针对多行
定义元素对齐方式：
normal
start
end
center
space-around
space-between
space-evenly
合并：place-content

justify-items 和 align-items 针对单行

	justify-items: 调整子元素水平对齐方式
（调整子元素在主轴方向上的对齐方式）

start
end
center

其他

grid-gap
用来创建行和列之间的空隙
接受两个值 第一个是行与行之间的间距 第二个是列与列之间的间距
如果只给一个值，那么行与列之间的间距是一样的

grid-row-gap
grid-column-gap