Grid布局

Grid布局

Flexbox用于设计横向或者纵向的布局，而Grid布局则被设计用于在两个维度上，即把元素按列和行排列整齐

通flex一样，通过指定display的值可以转到grid布局，即display:grid

下面例子使用了于flex例子类似的方法，描述了一个容器和若干个子元素。

其中：

除了使用display:grid，还分别使用了

grid-template-rows:定义行的轨道

grid-template-columns:定于列的轨道

grid-gap:定义子元素的间隔

   

One

   

Two

   

Three

   

Four

   

Five

   

Six

显示出：

无需再在子元素上指定任何规则，它们自动地排列在了创建好地格子中

在grid布局中，你可以显式地将元素自由摆放，而不是依赖浏览器的自动排列。

定义一个与上面一样的grid，但是只用三个元素，利用grid-column和grid-row两个属性来指定一个元素应该从哪一行/列开始，并在哪一行/列结束，这样能让一个元素在多个行与列之间展开

row：第几行 column：第几列

   

One

   

Two

   

Three

显示：