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