采用20/80原则学习 CSS Grid 布局

正文

请到「今天看啥」查看全文

如果你有使用过adobe、photoshop、sketch 这类软件的话，那么你就可以很容易的理解。

在 CSS Grid 布局的语义中，Grid 容器是可以容纳网格所有子项的一个载体（Grid 世界的爸爸）。

假设你有个布局需求，如图：

布局是由一个网格容器和多个单元格组成。最外层且最大的矩形作为整个布局的载体既网格容器；小一点的矩形为单元格。

网格线

图中横线和纵线，用来划分网格容器。

网格单元

网格单元是网格布局中的最小单元，它是由4条相邻的网格线围成的。

网格区域

网格区域最小占据一个网格单元，最大可以占领整个网格容器。
下图中,四个网格单元所覆盖的区域构成一个网格区域。

网格轨道

我非常不喜欢学术定义。网格轨道可被视为是列或行的另一个花哨的别名。任何两个网格线之间的空间。

综上，我们已经学习完目标的一半了，希望你还有耐心读下去。

Part 2: 后1/2部分

已经了解了基本术语，让我们玩起来吧

声明一个网格

就像Flexbox,一切始于一行代码。 display: grid 或者 display: inline-grid 。

举例说明，让 div标签作为网格容器：

请到「今天看啥」查看全文