本文详细介绍了CSS Grid布局的基础知识，包括容器、项目、行、列和单元格的概念，以及网格线的使用，旨在通过全程注释和实践操作帮助读者掌握这一现代布局技术。
全程注释，全靠动手
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>
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
