CSS-grid网格布局

GridLayout(网格布局)
先描述一下我自己经常使用的几种布局方式：

正常文档流：内联元素从左到右排序，块级元素从上到下排序
float+clear 浮动+清除
position 定位布局
display:inline-block; 行内布局
负margin布局
弹性布局

grid布局的优势：Flex布局是轴线布局，只能指定项目针对轴线的位置，可以看作是一维布局，这是一个二维布局，优点就是可以同时处理行和列，Grid布局目前在很多浏览器都可以支持了，详细兼容情况去Caniuse查看。

网格布局属性:

1. grid-template-column 设置列
2. grid-template-row 设置行
3. grid-template-areas 定位空间
4. grid-template （1）和（2）和（3）组合使用缩写
5. grid-row-gap
6. grid-column-gap
7. grid-gap 5,6的简写
8. …

利用grid-template-columns、grid-template-rows构建网格

.container{
    
    
  width:400px;
  height:300px;
  border:1px solid red;

  display:grid;      /*grid布局*/
  grid-template-columns:10% auto 10%;  /*设置列*/
  grid-template-rows:50px auto 50px;   /*设置行*/
}

1.repeat()

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

第一个是重复的次数，第二个参数是所要重复的值

2.auto-fill

有时，单元格的大小是固定的，但是容器的大小不确定，这个属性就会自动填充。
grid-template-columns:repeat(auto-fill,100px);

3.fr

为了方便表示比例关系，网格布局提供了fr关键字。fraction的缩写，意为“片段”；

grid-template-columns:repeat(3,1fr);//三等分
grid-template-columns:1fr 2fr 3fr;//按比例 1：2：3

4.minmax()

函数产生一个长度范围，表示长度就在这个范围之中，他可以接受两个参数，分别表示为最小值和最大值。

grid-template-columns:1fr minmax(150px,1fr) //最小不会小于150px

5.auto

表示由浏览器自己决定长度
grid-template-columns:100px auto 100px（中间的宽度由浏览器决定，自动分配）

6.网格线

可以用方括号定义网格线名称，方便以后引用
grid-template-columns:[c1] 100px [c2]100px;

row-gap/gap

就是grid-item之间相距的距离
grid-column-gap:20px;
grid-row-gap:20px;

grid-gap:20px;

:::warning
根据新标准，grid-前缀已经删除 row-gap column-gap gap
:::

grid-template-area

一个区域由单个或多个单元格组成，由你决定

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

grid-auto-flow

• dense 稠密的，空间利用率高

对齐方式

写在容器上的对齐属性，justify-items(水平方向) 对齐所有items / align-items垂直方向对齐所有的items。
_针对所有的items。

每一个项目在自己所在的网格里面，往左对齐，往右对齐。_

justify-items:start/end/center/stretch;

justify-content(水平方向) / align-content(垂直方向)

容器里面所有内容打包在一起，叫content。所有内容变成一坨的对齐方式。

grid-auto-columns / grid-auto-rows