CSS之Grid布局

目录

结构划分以及组成

代码实现

规划网格 

定位格子区域

隐形网格 

效果展示

---

Grid专为布局而生。Flexbox是沿着两条轴排列分布，定义空间的分配。Grid则是把子结点布到网格中，这个网格可以是预设好的几行几列，也可能是自动生成的隐式的网格，总之头脑中始终要有一个“网格”的意象。Grid的规则属性很多，其中不乏一些是shorthands。我们需要先充分理解Grid模型，才能得心应手。在布局上，它绝对是一柄利器。兼容性前面说了，目前PC端上支持还是比较成熟的，移动端上不建议用。

结构划分以及组成

• 其中Gridline为网格线，Row为行，Column为列，Grid Cell为格子，Grid Area为网格区域 。

代码实现

<div class="wrapper">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
</div>