前言

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

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

CSS Grid布局提供了更直观的网格化布局方式，使得响应式设计和复杂页面结构的实现更加简单和高效。

Flex 布局是轴线布局，可以看作是一维布局。
Grid 布局则是将容器划分成行和列，产生单元格，可以看作是二维布局。
Grid 布局远比 Flex 布局强大。

一、认识Grid

实现一个九宫格布局
html" title=css>css代码

html" title=css>css">        * {list-style: none;margin: 0;padding: 0;}body{padding: 2%;} li{text-align: center;padding: 10px;}li:nth-child(1) {background-color: red;}li:nth-child(2) {background-color: blue;}li:nth-child(3) {background-color: green;}li:nth-child(4) {background-color: yellow;}li:nth-child(5) {background-color: pink;}li:nth-child(6) {background-color: purple;}li:nth-child(7) {background-color: orange;}li:nth-child(8) {background-color: aqua;}li:nth-child(9) {background-color: gray;}

html代码

    <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul>

效果图

ul的html" title=css>css代码

        ul {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 10px;}

效果图

1.1容器和项目

上面例子中ul就是容器，里面的li就是项目
注意：项目只能是容器的顶层子元素，不包含项目的子元素。

1.2行和列

水平为行(row)，垂直的为列(column)
上面例子中123就是行，147就是列

1.3单元格和网格线

行和列的交叉区域，称为"单元格"（cell）。
正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。
正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

二、容器属性

使布局变为网格布局
display: gird：块级元素。
display: inline-grid：行内元素。

2.1.grid-template-columns与grid-template-rows属性

grid-template-columns属性定义每一列的列宽，
grid-template-rows属性定义每一行的行高。

2.1.1 直接使用长度单位比如px

html" title=css>css">        ul {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 60px 60px 60px;}

上面表示一个三行三列的网格，列宽为100px,行高为60px。

2.1.2 使用百分比 %

html" title=css>css">        ul {display: grid;grid-template-columns: 33.33% 33.33% 33.33%;grid-template-rows: 33.33% 33.33% 33.33%;}

2.1.3 使用repeat函数

有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。
比如上面的%可以简写为repeat(3, 33.33%)，意思表示分三行，每一行占33.3%

repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。
repeat()重复某种模式也是可以的。
repeat(2, 160px 40px 100px) 表示一行占160px,第二行占40px，第三行占100px，并且重复两次，也就是分6行

html" title=css>css">        ul {display: grid;grid-template-columns: repeat(2, 160px 40px 100px);}

2.1.4 按比例划分 fr 关键字

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。
如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍，1fr 2fr表示总共分了3分，前者占1/3后者占2/3。
使用过三方ui库的比如Bootstrap,应该清楚网格布局(Layout )是按24等份来划分的，这里可以看做第一列划分了8等份，第二列划分了16等份。

fr也可以与绝对长度的单位结合使用，

html" title=css>css">        ul {display: grid;grid-template-columns: 150px 1fr 2fr;}

看到这里是不是想到了什么？没错那就是三栏布局，左右固定，中间自适应可以直接这样写grid-template-columns: 150px 1fr 150px;

2.1.5 自动填充 auto 关键字

auto 表示由浏览器自己决定长度。

html" title=css>css">        ul {display: grid;grid-template-columns: auto 1fr 2fr;}

上面例子中第一列的宽度由其内容决定，第二、三列则占据剩余的空间

与fr的区别
fr 适用于分配剩余空间，不受内容大小限制。
auto 适用于内容驱动的大小调整，通常用于使列或行根据内容的实际需要调整其大小。

auto-fill属性：只能应用在repeat函数中的第一个参数， 比如repeat(auto-fill, 30%);表示自动填充每一份占30%，未分配的空间将空余

html" title=css>css">        ul {display: grid;grid-template-columns:repeat(auto-fill, 30%);border: 1px solid red;}

2.1.6 最大值和最小值minmax

• 当空间满足时，显示最大值
• 当空间不足时，使用最小值
• 当空间不满足最大值且大于最小值时，则取值为最小值与最大值中间的值

html" title=css>css">        ul {display: grid;grid-template-columns: 200px 100px minmax(100px, 400px);border: 1px solid red;}

上面例子中minmax(100px, 400px) 表示列宽不小于100px，不大于400px。

2.2 gap属性

row-gap：行与行的间隔（行间距）
column-gap：列与列的间隔（列间距）
gap：column-gap和row-gap的合并简写形式

html" title=css>css">        ul {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 1fr);border: 1px solid red;row-gap: 10px;column-gap: 10px;}

上面代码可以简写为gap: 10px；

2.3 grid-template-areas 属性

grid-template-areas 用于为网格容器中的网格轨道（列和行）定义命名区域，然后通过每个子项的 grid-area 属性，将它们与对应的区域名称关联起来

1. 为每个网格项命名
   首先，在定义网格容器的时候为每个网格项分配一个区域名称，可以使用引号和空格来表示每一行，用句点 . 来表示空区域。

html" title=css>css">        ul {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-template-areas:"header header header""nav main main""nav main main""footer footer footer";border: 1px solid red;gap: 10px;}

2. 将网格项关联到区域名称

html" title=css>css">        .header {grid-area: header;background-color: #f2f2f2;}.nav {grid-area: nav;background-color: #d5e8d4;}.main {grid-area: main;background-color: #cce5ff;}.footer {grid-area: footer;background-color: #ffb3ba;}

3. 实现网格布局

    <ul><div class="header">Header</div><div class="nav">Nav</div><div class="main">Main Content</div><div class="footer">Footer</div></ul>

实现效果图

2.3 grid-auto-flow 属性

grid-auto-flow属性调整网格的排列方向，默认值为row是横着排列，可以设置成column竖着排列

html" title=css>css">        ul {display: grid;grid-template-rows: repeat(3, 1fr);border: 1px solid red;grid-auto-flow: column;gap: 10px;}

2.4 单元格对其方式justify-items、align-items、place-items属性

justify-items：单元格水平方向(左中右)
align-items：单元格垂直方向(上中下)
place-items：单元格垂直方向 单元格水平方向

属性可以取下面这些值

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

html" title=css>css">        ul {display: grid;grid-template-rows: repeat(3, 100px);grid-template-columns: repeat(3, 100px);gap: 10px;justify-items: start;align-items: end;}

上面代码相当于place-items:end start; 如果省略第二个值，则浏览器认为与第一个值相等。

2.5 整个内容区域对其方式 justify-content、align-content、place-content属性

justify-content：整个内容区域在容器里面的水平位置(左中右）
align-content：整个内容区域的垂直位置(上中下）
place-content：整个内容区域垂直方向 整个内容区域水平方向

属性可以取下面这些值

• start：对齐容器的起始边框。
• end：对齐容器的结束边框。
• center：容器内部居中。
• stretch：项目大小没有指定时，拉伸占据整个网格容器。
• space-around ： 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
• space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
• space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

html" title=css>css">        ul {width: 500px;height: 500px;display: grid;grid-template-rows: repeat(3, 100px);grid-template-columns: repeat(3, 100px);gap: 10px;align-content: center;justify-content: center;border: 1px solid red;}

当然也可以这样写place-content：center,如果省略第二个值，浏览器就会假定第二个值等于第一个值。

2.6. grid-auto-columns和grid-auto-rows属性

grid-auto-columns:定义在网格容器中隐式创建的列的大小
grid-auto-rows:定义在网格容器中隐式创建的行的大小。

html" title=css>css">        ul {width: 500px;height: 500px;display: grid;grid-template-rows: repeat(3, 100px);grid-template-columns: repeat(3, 100px);gap: 10px;place-content: center;border: 1px solid red;grid-auto-columns: 40px;grid-auto-rows: 40px;}

这个例子中第10项是多余的，没有设置宽高，就采用了grid-auto-columns属性和grid-auto-rows属性设置的列宽和行高。

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

三、项目属性

3.1 定位属性

grid-column-start 和 grid-column-end：用于指定项目横跨的列线，将项目放置在指定列之间，左边框所在的垂直网格线与右边框所在的垂直网格线
grid-row-start 和 grid-row-end：用于指定项目横跨的行线，将项目放置在指定行之间，上边框所在的水平网格线与下边框所在的水平网格线
grid-column：grid-column-start 和 grid-column-end 的缩写形式。
grid-row：grid-row-start 和 grid-row-end 的缩写形式

• 例1：

html" title=css>css">        ul {display: grid;width: 500px;height: 500px;gap: 2px;border: 1px solid red;} li:nth-child(1) {background-color: red;grid-column-start: 2;grid-column-end: 5;}

这里表示了，第一个li的左边框是第二根垂直网格线，右边框是第五根垂直网格线。
除了第一个li以外，其他li都没有指定位置，由浏览器自动布局。

• 例2：

html" title=css>css">        li:nth-child(1) {background-color: red;grid-column-start: 2;grid-column-end: 5;grid-row-start: 2;grid-row-end: 4;}

这里表示了，第一个li的左边框是第二根垂直网格线，右边框是第五根垂直网格线。上边框为第二根水平网格线，下边框是第四根水平网格线。

注：如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序。

上面的例子用 grid-column与grid-row可以简写为grid-column: 2 / 5; grid-row: 2 / 4;

关键字span :表示跨域几个单元格，即左右边框（上下边框）之间跨越多少个网格。
span后面的单元格数量等于最后一个网格线-第一个网格线。

• 例3：

html" title=css>css">        li:nth-child(1) {background-color: red;grid-column-start: span 2;}

这里grid-column-start: span 2代表跨越2个网格等同于grid-column-end: span 2

上面的例2也可以这样写，效果是一样的

html" title=css>css">        li:nth-child(1) {background-color: red;grid-column: 2 / span 3;grid-row: 2 / span 2;}

3.2 对齐属性

justify-self：控制项目在单元格中水平方向上的对齐方式，可以让项目在单元格中自行对齐，而不受容器的对齐方式影响。
align-self：与 justify-self 类似，用于控制项目在单元格中垂直方向上的对齐方式。
place-self：该属性是 justify-self 和 align-self 的简写形式，可以同时设置水平和垂直方向上的对齐方式。

可以取值

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

html" title=css>css">        ul {display: grid;width: 500px;height: 500px;gap: 2px;border: 1px solid red;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 1fr);} li:nth-child(1) {background-color: red;justify-self: center;}

其实 justify-self和align-self 与 justify-items和align-items用法完全一致，只是前者作用于单个单元格，后者作用于整个项目。

place-self也是同理

html" title=css>css">        li:nth-child(1) {background-color: red;place-self: center ;}

3.3 复合属性 grid-area

grid-area：指定项目放在哪一个区域。可以同时指定行的起始和结束线以及列的起始和结束线。这个属性的使用非常方便，可以直接使用区域的名称进行指定。

参考2.3 的grid-template-areas属性

html" title=css>css">        .header {grid-area: header;background-color: #f2f2f2;}

grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。

html" title=css>css">grid-area: <row-start> / <column-start> / <row-end> / <column-end>

举例

html" title=css>css">        ul {display: grid;width: 500px;height: 500px;gap: 2px;border: 1px solid red;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(4, 1fr);}li:nth-child(1) {grid-area: 1 / 2 / 3 / 3;background-color: red;}

end

参考：阮一峰CSS Grid 网格布局教程