栅格盒子布局

元信息

目标：掌握原生 CSS Grid 的二维网格布局——用 grid-template-columns/rows 自定义坐标轴线，并与浮动、Flex 对比各自的功能定位与适用场景
关键概念：CSS Grid、display:grid、grid-template-columns、二维网格
关联阶段：cp2
常见误区：以为 Grid 与 Flex 是竞争替代关系（Flex 是一维轴线布局、Grid 是二维网格布局，各有适用场景）；以为 Grid 兼容性已无顾虑（较新特性仍需关注 caniuse）

原生CSS Grid

在最新的Web标准中，加入了原生的CSS Gird 盒子模型, 从而支持盒子内部采用栅格方式进行布局，即自定义多条坐标轴线，可以在最新的浏览器里体验：

栅格盒子布局-0

CSS Grid示例

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

可在 https://caniuse.com 搜索 'css grid' 可以查看各浏览器的实现情况

各种布局技术的简单比较

特征	浮动	Flex	CSS Grid
功能	基于定位	基于十字轴线	基于二维网格线
兼容性	最好	较好，尤其移动设备	较差
复杂性	基于各种技巧	简单易用	较复杂

栅格盒子布局 ​

元信息 ​

原生CSS Grid ​

CSS Grid示例 ​

各种布局技术的简单比较 ​

CSS Grid 参考 ​

栅格盒子布局

元信息

原生CSS Grid

CSS Grid示例

各种布局技术的简单比较

CSS Grid 参考