Grid 布局是网站设计的基础,CSS Grid 是创建网格布局最强大和最简单的工具。
CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素)。 wrapper 是实际的 grid(网格),items 是 grid(网格) 内的内容。要把 wrapper 元素变成一个 grid(网格),只要简单地把其 display
属性设置为 grid
即可。为了使其成为二维的网格容器,我们需要定义列和行,并且自己设定高度和宽度。然后学习的是如何在 grid(网格) 上放置 items(子元素) 。这里才是体现 Grid 布局能力的地方,因为它使得创建布局变得非常简单。