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

显示:


你可能感兴趣的:(Grid布局)