5分钟学会 CSS Grid

栅格（Grid）布局是现在主流的网页设计，CSS Grid 模块是目前最简单的布局创建模式，单从布局方面已经超越了 Bootstrap。

这个布局的兼容性目前也很不错，主流浏览器均兼容，包括 App 原声的 WebView 模块内核。

不多说了，直接开始！

第一个布局

CSS Grid 布局的核心 DOM 结构为 wrapper（parent） 和 items（children）；wrapper 为实际的 grid 容器，items 则为 grid 容器中的内容元素。

我们在一个 wrapper 容器中创建 6 个 item：

<div class="wrapper">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</