Grid布局
基础知识和浏览器支持
截至2022年4月，大部分浏览器都提供了对 CSS Grid 的原生支持，而且无需加浏览器前缀，Internet Explorer 10和11也支持它，却是一个过时的语法实现 。
容器和项目
采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。
<div id="container">
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
上面代码中，最外层的<div>元素就是容器，内层的三个<div>元素就是项目。
注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的<p>元素就不是项目。Grid 布局只对项目生效。
行和列
容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。
上图中，水平的深色区域就是"行"，垂直的深色区域就是"列"。
单元格
行和列的交叉区域，称为"单元格"（cell）。
正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。
网格线
划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。
正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。
上图是一个 4 x 4 的网格，共有5根水平网格线和5根垂直网格线。
定义布局的行和列
开启Grid
如何将一个容器变成Grid容器呢？ 可以通过下面的属性来设置：
display:grid | inline-grid;
display:grid可以将容器变为一个块级容器，容器内部采用网格布局。
display:inline-grid可以将容器变为一个行内块容器，容器内部采用网格布局。
注意，设为网格布局以后，容器子元素（项目）的
float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
行和列的划分
在容器的身上开启了网格布局之后，就可以来规划行和列。主要应用到下面的两个属性：
grid-template-rows: 定义每一行的行高。grid-template-columns: 定义每一列的列宽。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name
最低0.47元/天 解锁文章
182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
