1. grid布局是什么

Grid 布局与 Flex 布局类似，Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，是一维布局，Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大（兼容性较Flex布局差些）

2. 常见布局方式

2.1.传统布局方式

利用position属性 + display属性 + float属性布局, 兼容性最好,但相对麻烦

2.2.flex布局(display: flex/inline-flex)

有自己的一套属性, 效率高, 学习成本低, 兼容性强

2.3.grid布局(display: grid/inline-grid)

网格布局（Grid）是最强大的 CSS 布局方案，但grid直到2017年才被广泛支持，目前兼容性不如flex布局

注意:设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

题外话 从Web的诞生到现在，Web布局在不同的历史时期也经历了不同的变化

3. 基本概念

3.1. 容器和项目

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）

注意：

项目只能是容器的顶层子元素，不包含项目的子元素。Grid 布局只对项目生效
项目与单元格的概念有重合的意思，出发角度不一样

3.2. 网格线

正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线

4. grid 相关属性

grid布局属性分为容器属性与项目属性

4.1 容器属性

grid-template-columns
grid-template-rows
grid ow-gap
grid-column-gap
grid-gap (3和4的简写)
grid-template-areas
grid-auto-flow
justify-items
align-items
place-items(8和9的简写)
justify-content
align-content
place-content(11和12的简写)
grid-auto-columns
grid-auto-rows

(1)容器属性 grid-template-*

1、用来设置行、列数量及各行列的尺寸，不填写，自动分配

grid-template-columns:100px 100px 100px; // 显示为三列每一列宽度100px 除了使用绝对单位，也可以使用百分比
grid-template-columns:repeat(3,100px); //同上
repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值
repeat()重复某种模式也是可以的。

2、auto-fill，有时，单元格的大小是固定的，但是容器的大小不确定，这个属性就会自动填充

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

3、fr，为了方便表示比例关系，网格布局提供了fr关键字(fraction 的缩写，意为"片段”)

grid-template-columns:repeat(4,1fr); // 宽度平均分成四等份 
grid-template-columns:1fr 2fr 3fr; // 列宽这样是分成6份各占 1 2 3 份 效果如下图

fr可以与绝对长度的单位结合使用，这时会非常方便

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}

4、minmax()，函数产生一个长度范围，表示长度就在这个范围之中，它接受两个参数，分别为最小值和最大值

grid-template-columns: 1fr minmax(150px，1fr); // 第一个参数最小值,第二个最大值

5、auto，表示由浏览器自己决定长度

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

6、网格线．可以用方括号定义网格线名称，方便以后给盒子定位使用

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

网格布局允许同一根线有多个名字，比如[fifth-line row-5]

(2)容器属性 grid-gap / grid-column-gap / grid-row-gap

item(项目)相互之间的距离

grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，语法如下

grid-gap: <grid-row-gap> <grid-column-gap>

如果grid-gap省略了第二个值，浏览器认为第二个值等于第一个值

根据最新标准，上面三个属性名的grid-前缀已经删除，grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap。

（3）容器属性 grid-template-areas

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域（具体使用，需要在项目属性里面设置） 名字相同表示在一个区域，定位或者写项目属性的时候会用到

（4）容器属性 grid-auto-flow

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列".即先填满第一行，再开始放入第二行(就是子元素的排放顺序)

grid-auto-flow: row; // 默认值

grid-auto-flow: column;

row/column dense属性值表示换行时留下的空间可以由下面的元素填补上去

（5）容器属性 justify-items(水平方向)/ align-items(垂直方向)/ place-items

设置单元格内容的水平和垂直的对齐方式

place-items属性是align-items属性和justify-items属性的合并简写形式

place-items: <align-items> <justify-items>; //如果省略第二个值，则浏览器认为与第一个值相等

（6)容器属性 justify-content (水平方向)/ align-content(垂直方向)/ place-content

设置整个内容区域（所有的项目的总和）的水平和垂直的对齐方式

justify-content: start | end | center | stretch | space-around | space-between | space-evenly; //水平方向 

align-content: start | end | center | stretch | space-around | space-between | space-evenly; // 垂直方向

place-content: <align-content> <justify-content> //`place-content`属性是`align-content`属性和`justify-content`属性的合并简写形式

(7)容器属性grid-auto-columns / grid-auto-rows

有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目.

grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px; 
}

4.2 项目属性

grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column(1和2的简写形式)
grid-row(3和4的简写形式)
grid-area
justify-self
align-self
place-self (8和9的简写形式)

(1)grid-column-start / grid-column-end / grid-row-start / grid-row-end / grid-column / grid-row

指定item的具体位置，根据在哪根网格线

grid-column: 1 / 3; 前两个的简写

除了1号项目以外，其他项目都没有指定位置，由浏览器自动布局，这时它们的位置由容器的grid-auto-flow属性决定，这个属性的默认值是row，因此会"先行后列"进行排列。此时把这个属性的值分别改成column、row dense和column dense，看看其他项目的位置发生了怎样的变化

这四个属性的值，除了指定为第几个网格线，还可以指定为网格线的名字

这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格

使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序

(2)gird-area

1、指定项目放在哪一个区域 2、grid-area 还是 grid-row-start / grid-column-start / grid-row-end / grid-column-end 的缩写形式缩写格式如下

grid-area:1 / 1 / 3 / 3;

(3)justify-self / align-self / place-self

place-self属性是align-self属性和justify-self属性的合并简写形式

place-self: <align-self> <justify-self>; //如果省略第二个值，place-self 属性会认为这两个值相等

grid 应用场景及练手案例

blog.csdn.net/qq_41581588…

关于grid布局的那些事