Grid布局

概述

Grid 布局即网格布局，目前css布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格，然后利用这些网格组合做出各种各样的布局。比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系，目前唯一一种 CSS 二维布局。在兼容性方面，截至目前，几乎所有的浏览器都对 CSS Grid 提供了原生的支持。
Grid布局优点：这是一个二维布局系统，最大优点就是可以同时处理列和行.

Grid 布局和 flex 布局

flex 布局和 Grid 布局有实质的区别:

• flex 布局是一维布局
• Grid 布局是二维布局

flex 布局一次只能处理一个维度上的元素布局，一行或者一列。
Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。

网格布局的属性

属性的基本概念：

1. 容器（container）——有容器属性
2. 项目（items）——有项目属性
3. 行（row)
4. 列（column）
5. 间距（gap) ——单元格之间的距离
6. 区域（area）—— 自己划分每个单元格占据的区域
7. 内容（content)

容器和项目

Grid 和 flex 类似，布局的属性都是分为两类，一类定义在容器上，称为容器属性，一类定义在项目上，称为项目属性

采用网格布局的区域，称为“容器”。容器内部的采用网格定位的子元素称为“项目”

<div class="box">
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
</div>

上面的代码中，box就是容器，item就是项目

网格轨道

通过 grid-template-rows 和 grid-template-columns 指定当前容器的行和列后，这里的行和列就是网格轨道。但在实际页面中，由于页面的内容不确定，内容可能会超过 grid-template-columns和 grid-template-rows 指定的网格轨道个数，这个时候网格将会在隐式网格中创建行和列。按照默认，这些轨道将自动定义尺寸，所以会根据它里面的内容改变尺寸。

网格线

网格线是Grid布局规范中最重要的概念之一。网格线是用来在水平和垂直方向分割网格的线。水平方向的网格线是从左向右；垂直方向是从上往下。网格线的编号都是从 1 开始的。

Grid 布局属性

Grid 布局属性分为两大类

1. 一类是容器属性，
2. 一类是项目属性。

容器属性

容器属性声明 display：grid 则该容器是一个块级元素，设置成display: inline-grid则容器元素为行内元素。

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

grid-template-columns 属性

grid-template-rows 属性

容器指定了网格布局以后，接着就要划分行和列。 grid-template-columns 属性定义每一列的列宽，grid-template-rows 属性定义每一行的行高。

.box {
     display: grid;
     grid-template-columns: 100px 100px 100px;
     grid-template-rows: 100px 100px 100px;
     /*指定了一个三行三列的网格，列宽和行高都是100px*/
}

repeat() 函数

有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用 repeat() 函数，简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。比如上面行高都是一样的，我们可以这么去实现，实际效果是一模一样的

.box {
     display: grid;
     grid-template-columns: repeat(3, 33.33%);
     grid-template-rows: repeat(3, 33.33%);
}

grid-template-columns、grid-template-rows设置的行或者列比较多的时候，可以使用repeat() 这个函数简化重复的值

auto-fill 关键字

表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格，这时可以使用 auto-fill 关键字表示自动填充。
有的时候，父容器的尺寸是不确定的，我们需要把子元素往父容器中逐个填充，这个时候我们可以利用auto-fill不确定容器尺寸下的自动填充：

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

表示每列宽度 100px ，然后自动填充，直到容器不能放置更多的列

fr 关键字

fr 是单词fraction的缩写，表示分数。
Grid 布局还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。 fr 单位代表网格容器中可用空间的一等份。 grid-template-columns: 200px 1fr 2fr 表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。

.box {
     display: grid;
     grid-template-columns: 200px 1fr 2fr;
}

minmax() 函数

我们有时候想给网格元素一个最小和最大的尺寸， minmax()函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数，分别为最小值和最大值。grid-template-columns: 1fr 1fr minmax(300px, 2fr)的意思是，第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍。

.box {
     display: grid;
     grid-template-columns: 1fr 1fr minmax(300px, 2fr);
 }

auto 关键字

auto 关键字表示由浏览器自己决定长度。通过 auto关键字，我们可以轻易实现三列或者两列布局。
grid-template-columns: 100px auto 100px 表示第一第三列为 100px，中间由浏览器决定长度。

.box {
     display: grid;
     grid-template-columns: 100px auto 100px;
 }

row-gap 属性

row-gap属性设置行与行的间隔（行间距）
row-gap: 10px表示行间距是 10px

column-gap 属性

column-gap属性设置列与列的间隔
column-gap: 20px 表示列间距是 20px

gap 属性

gap属性是 column-gap 和 row-gap 的合并简写形式：gap: 10px 20px

grid-auto-flow 属性

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是”先行后列”，即先填满第一行，再开始放入第二行
这个顺序由 grid-auto-flow 属性决定，默认值是 row ，即”先行后列”。也可以将它设成 column ，变成”先列后行”。

grid-auto-flow: column;

justify-items 属性

justify-items 属性设置单元格内容的水平位置（左中右）

.container {
    justify-items: stretch | start | end | center;
}

1. start：对齐单元格的起始边缘。
2. end：对齐单元格的结束边缘。
3. center：单元格内部居中。
4. stretch：拉伸，占满单元格的整个宽度（默认值）

align-items 属性

align-items 属性设置单元格内容的垂直位置（上中下）

.container {
     align-items: stretch | start | end | center;
}

place-items 属性

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

.container {
    place-items: start end;
}

justify-content 属性

justify-content 指定了网格元素的水平分布方式。
此属性仅在网格总宽度小于 grid 容器宽度时候有效果。例如，我们网格设定的都是固定的宽度值，结果还有剩余空间。
语法如下：

.container {
    justify-content: stretch | start | end | center | space-between | space-around | 
space-evenly;
}

1. stretch：默认值。拉伸，宽度填满grid容器，拉伸效果需要网格目标尺寸设为auto时候才有效，如果定死了宽度，则无法拉伸。
2. start：默认值。逻辑CSS属性值，与文档流方向相关。默认表现为左对齐。
3. end：逻辑CSS属性值，与文档流方向相关。默认表现为右对齐。
4. center：表现为居中对齐。
5. space-between：表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配
6. space-around：around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
7. space-evenly：evenly是匀称、平等的意思。也就是视觉上，每个子项两侧空白间距完全相等。

align-content 属性

align-content 属性是整个内容区域的垂直位置（上中下）
align-content 可以看成和 justify-content是相似且对立的属性，justify-content 指明水平方向 grid 子项的分布方式，而 align-content 则是指明垂直方向每一行grid元素的分布方式。如果所有 grid 子项只有一行，则 align-content 属性是没有任何效果的。
语法如下：

.container {
    align-content: stretch | start | end | center | space-between | space-around | 
space-evenly;
}

1. stretch：默认值。每一行flex子元素都等比例拉伸。例如，如果共两行flex子元素，则每一行拉伸高度是50%。
2. start：逻辑CSS属性值，与文档流方向相关。默认表现为顶部堆砌。
3. end：逻辑CSS属性值，与文档流方向相关。默认表现为底部堆放。
4. center：表现为整体垂直居中对齐。
5. space-between：表现为上下两行两端对齐。剩下每一行元素等分剩余空间。
6. space-around：每一行元素上下都享有独立不重叠的空白空间。
7. space-evenly：每一行元素都完全上下等分。

place-content属性

place-content 是 align-content和 justify-content 属性的缩写。

.container {
   place-items: <align-content> / <justify-content>;
}

grid-auto-columns 属性

grid-auto-rows 属性

grid-auto-columns 属性和 grid-auto-rows 属性用来设置，浏览器自动创建的多余网格的列宽和行高。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。
指定隐式创建的行轨道大小。
grid-auto-rows ：隐式行的大小。
grid-auto-columns ：隐式列的大小。

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

项目属性

grid-column-start 属性

grid-column-end 属性

grid-row-start 属性，

grid-row-end 属性

表示grid子项所占据的区域的起始和终止位置，包括水平方向和垂直方向。

• grid-column-start 属性：左边框所在的垂直网格线
• grid-column-end 属性：右边框所在的垂直网格线
• grid-row-start 属性：上边框所在的水平网格线
• grid-row-end 属性：下边框所在的水平网格线

.item-1 {
     grid-column-start: 1;
     grid-column-end: 3;
     grid-row-start: 2;
     grid-row-end: 4;
}

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

.item-1 {
     grid-column-start: span 2;
}

项目的左边框距离右边框跨越2个网格
使用这四个属性，如果产生了项目的重叠，则使用 z-index 属性指定项目的重叠顺序
grid-column 属性是 grid-column-start 和 grid-column-end 的合并简写形式， grid-row 属性是
grid-row-start 属性和 grid-row-end 的合并简写形式。

grid-column 属性

grid-row 属性

grid-column 属性是 grid-column-start 和 grid-column-end 的合并简写形式， grid-row 属性是
grid-row-start 属性和 grid-row-end的合并简写形式。

.item {
     grid-column: <start-line> / <end-line>;
     grid-row: <start-line> / <end-line>;
}

.item-1 {
     grid-column: 1 / 3;
     grid-row: 1 / 2;
}

/* 等同于 */
.item-1 {
     grid-column-start: 1;
     grid-column-end: 3;
     grid-row-start: 1;
     grid-row-end: 2;
}

这两个属性之中，也可以使用 span 关键字，表示跨越多少个网格。

.item-1 {
     background: #b03532;
     grid-column: 1 / 3;
     grid-row: 1 / 3;
}

/* 等同于 */
.item-1 {
     background: #b03532;
     grid-column: 1 / span 2;
     grid-row: 1 / span 2;
}

项目 item-1 占据的区域，包括第一行 + 第二行、第一列 + 第二列。

justify-self 属性

align-self 属性

justify-self 属性设置单元格内容的水平位置（左中右），跟 justify-items 属性的用法完全一致，
但只作用于单个项目。
align-self 属性设置单元格内容的垂直位置（上中下），跟 align-items 属性的用法完全一致，也是
只作用于单个项目。

.item {
     justify-self: start | end | center | stretch;
     align-self: start | end | center | stretch;
}

这两个属性都可以取下面四个值。

• start：对齐单元格的起始边缘。
• end：对齐单元格的结束边缘。
• center：单元格内部居中。
• stretch：拉伸，占满单元格的整个宽度（默认值）。

place-self 属性

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

相关资料

视频资料：
https://www.bilibili.com/video/BV12H4y1A7Z1/?spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=a68414cd60fe26e829ce1cdd4d75a9e6

一、Web前端适配css3响应式布局实战(媒体查询、百分比、rem和vw/vh）
二、深入浅出之Flex布局，Flex布局中不为人知的细节
“链接：https://pan.baidu.com/s/1DZIZ2_JUFJoUnUEk2NHn2A
提取码：7k2q”

“如此强大的Grid布局，你还在犹豫什么！学起来！
一起迈向Grid二维布局，掌握CSS布局进阶技术，轻松解决各种精美页面布局难题。”
“链接：https://pan.baidu.com/s/1rD8M1-loG_a_ol1L_qikmQ?pwd=6666
提取码：6666”

从0开始通过一个商城实例手把手教你移动端商城布局
“链接：https://pan.baidu.com/s/1VsT1RrKdxvuURRopblzn6g
提取码：xjsp”