全程注释,全靠动手
1:容器(container) 和 项目(item)
2:行(row),列(column),单元格(cell)
3:网格线(grid line)
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Grid网格布局</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<!-- 一:容器和项目 -->
<!--1. 最外层div是 容器(container),
2. 容器内部采用网格定位的子元素称为 项目(item)
3. 注意:项目只能是容器的子元素,不包含项目的子元素,比如下面 p 标签不是项目
4. Grid 布局只对项目生效 -->
<div>
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
<!-- 二:行和列,单元格 -->
<!--1. 容器里水平区域称为 行(row)
2. 垂直区域称为 列(column)
3. 行和列的交叉区域,称为 单元格(cell)
正常情况下, n行 和 m列 会产生 n*m 个单元格,如3 * 3,会产生9个单元格-->
<!-- 三:网格线 -->
<!--1. 划分网格的线,称为"网格线"(grid line)
2. 水平网格线划分出行,垂直网格线划分出列。
3. 正常情况下,n行有n + 1根水平网格线,m列有m + 1根垂直网格线,比如三行就有四根水平网格线。 -->
<!-- 注 -->
<!--
设为网格布局后,容器子元素(项目)的 float, display: inline-block,
display: table-cell, vertical-align, column 等设置将失效
-->
</body>
</html>