内容

Grid 布局基本介绍
Grid 布局属性展示

1. Grid 布局

Grid 布局（网格布局）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

此图使用其他布局做起来着实磨人，但这正是 Grid 布局的杰作

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。了解 Flex布局：Flex布局详解。

Grid 布局图解：

2. 属性介绍

同很多布局一样，Grid 布局也分为 容器(container) + 项目(item)；所以属性就存在：容器属性 + 项目属性。值得庆幸的是：所有的列属性均有行属性与之对应且属性值一致

2.1 容器属性

①：grid-template-columns 控制列模板

 	display: grid;
    grid-template-columns: 100px 100px 100px;
    /*表示四行三列，且每个盒子都是100 * 100*/
    grid-template-rows: 100px 100px 100px 100px;

常见属性值：

• repeat(x,y) x 表示重复的此数，y表示重复的值。 （grid-template-columns: 100px 100px 100px;=> grid-template-columns: repeat(3, 100px)）

• repeat(auto-fill,100px) 单元格大小固定，但容器大小不确定，此属性会自动填充
  

• repeat(4,1fr) fr 关键字表示网格布局的比例关系。表示宽度平分为四份；等价于 1fr,1fr,1fr,1fr
  

• minmax() 函数产生一个长度范围，表示长度就在这个范围之中，他接受两个参数，分别是 最小值、最大值 （此处表示两列，一列占宽一半；一列最小占 150px，最大占一份）

• auto 表示由浏览器自己决定： grid-template-columns: 100px auto 100px; （表示两边100px，中间自适应）

②：grid-template-areas 把容器 任意划分为不同的区域。

grid-template-areas: 'a a a' 'b b b' 'c c c';

注意：此属性要配合项目属性一起使用，具体见项目属性

③：column-gap、row-gap、gap 控制 item（项目）之间的相互距离；gap 为 column-gap、row-gap 的复合属性

	/*column-gap: 20px;
    row-gap: 20px;*/
    gap: 20px;

④：justify-items、align-items 、place-items 设置 单元格内容 水平和垂直对齐方式；place-items 为 复合属性（属性值：start,end,center,strech）

/* justify-items: center;
    align-items: center; */
    place-items: center;

注意：它控制的是单元格内容

⑤：justify-content、align-content 设置 整个内容区域 水平垂直对齐方式；（属性值：start,end,center,strech,space-around,space-between,space-evenly）

	justify-content: center;
    align-content: center;

注意：此处控制的是整个内容区域

⑥：grid-auto-columns、grid-auto-rows 设置 多出来的项目 的宽和高

示例：设置了 3*3 的项目，但实际有 10 个项目，此时属性就用来设置多出来的项目

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

2.2 项目属性

了解项目属性之前就要对网格线做下了解，网格线让 Grid 布局更加强大

注意：网格线数永远比 item 项大 1；即 3*3 项目就有 4*4 的网格线与之对应

①：grid-column-start、grid-column-end、grid-row-start、grid-row-end 、grid-column(列复合属性) 用来设置 item 的具体位置 依据在哪跟网格线

示例：

	/*grid-column-start: 1;
    grid-column-end: 3;*/
    grid-column: 1/3;

表示 item 在一行上所占空间为：从第一条线->第三条线

注意：使用此属性时，请确保有指定范围的网格线

②：grid-column-start:span 3 往右边扩三格 === grid-column-end:span 3 往左边扩三格

③：grid-area 设置项目占的区域（区域由容器任意分配）

/*容器属性*/
grid-template-areas: 'a a a' 'b b b' 'c c c' 'd d d';
/*项目属性*/
grid-area: b;

表示此项目把 b 区域全部占完

③：grid-area 可对 grid-column-start、grid-column-end、grid-row-start、grid-row-end 进行简写

 /* grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3; */
    grid-area: 1/1/3/3;

注意：注意对应关系为：先 start 后 end

注意：第 10 个项目拉伸的原因是，我们在开始时就设置的是 3 * 4 的项目，多出的自适应
④：justify-self、align-content、place-self(复合写法) 设置 单元格内容 水平垂直对齐方式，跟 justify-items 用法完全一致，但只作用于单个项目。

/* justify-self: center;
    align-content: center; */
    place-self: center;

OVER