CSS3 Grid 网格布局知识总结

​简介

网格布局（Grid）​是最强大的 CSS 布局方案。

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

​Grid 布局​ 与 ​Flex 布局​有一定的相似性，都可以指定容器内部多个项目的位置。

但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定”项目”针对轴线的位置，可以看作是​一维布局​。

Grid 布局则是将容器划分成”行”和”列”，产生单元格，然后指定”项目所在”的单元格，可以看作是二维布局。

Grid 布局远比 Flex 布局强大。

注意：在 CSS 网格中，父元素称为​容器（container）​，它的子元素称为​项（items）​。

属性用法

display:grid;

1.添加多行多列

grid-template-rows     #添加行
grid-template-columns   #添加列
grid-template: <grid-template-rows> / <grid-template-columns>    #一次性添加行列

值单位：

可以使用绝对定位和相对定位单位如px和em来确定行或列的大小

fr（fraction 的缩写，意为”片段”）：设置列或行占剩余空间的一个比例
auto：设置列宽或行高自动等于它的内容的宽度或高度
%：将列或行调整为它的容器宽度或高度的百分比

示例：

grid-template-columns：auto 100px 20% 1fr;    #grid布局分了4列。每列的大小不同。

2.设置行列间隔

grid-column-gap    #创建多列之间的间距
grid-row-gap       #创建多行之间的间距
grid-gap           #为网格添加间距

示例：

grid-gap：50px     #给行列都设置间隔50px；

3.设置单元格大小

先来理解一下网格线：

网格的假想水平线和垂直线被称为​线（lines）​。

这些线在网格的左上角从 1 开始编号，垂直线向右、水平线向下累加计数。 

这是一个 3×3 网格的线条：

图中蓝色的线条代表列线。

你可以用 grid-column 属性定义网格项开始和结束的位置，进而控制每个网格项占用的列数。 

#items里面单独设置个自的大小
grid-column     #设置水平方向start和end;
grid-column-start    #设置水平方向start
grid-column-end      #设置水平方向end

row同理
grid-row        #设置竖直方向start和end;
grid-row-start​       #设置竖直方向start
​grid-row-end​         #设置竖直方向end

grid-area:<grid-row-start>/<grid-column-start>/<grid-row-end>/<grid-column-end>     #同时设置单元格的水平垂直大小。

示例：

grid-column:1/3     #设置单元格在水平方向占用1网格线到3网格线之间的空间，也就是第1、2格子。
grid-area:3/1/4/4;    #设置单元格占用第3-4行，1-4列

4.设置对齐方式

#items里面设置
justify-self         #设置单元格里内容对齐方法  值： start  end   center  stretch(拉伸)
align-self
#container里面设置
justify-items        #设置所有单元格
align-items

5.给单元格命名

6.repeat函数

grid-template-rows: repeat(100, 50px);     #添加 100 行网格，使每行高度均为 50px

7.minmax()函数

grid-template-columns: 1fr 1fr minmax(100px, 1fr);      #minmax(100px, 1fr)表示列宽不小于100px，不大于1fr

8.auto-fill和auto-fit关键字

repeat(auto-fill, minmax(60px, 1fr));

上面的代码效果：
列的宽度会随容器大小改变，在可以插入一个 60px 宽的列之前，当前行的所有列会一直拉伸。
注意：如果容器无法使所有网格项放在同一行，余下的网格项将移至新的一行。

9.place-items空间居中布局

place-items: <align-items> <justify-items>;

place-items: center;等同于place-items: center center;