网格项目 (Grid Items)

在一个网格容器中包含了多个网格项目。网格容器的子元素称为网格项目以及运行在网格容器的文本将自动变成一个匿名的网格项目,然后如果只是一个空格,这个匿名项目就相当于 display:none 一相被隐藏在网格容器之中。

一个网格项目创建一个新的格式化上下文内容。这种格式化上下文内容类型取决于它的 display 值。

网格项目层级 (z-index)

如果有多个项目在同一个网格区域,可以通过 z-index 设置其层级,若不设置后面的网格项目会覆盖在前面的网格项目之上。

<div class='items'>
  <div class='item' v-for='item in 2'>{{item}}</div>
</div>
.items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px;
  .item:nth-child(1) {
    grid-area: 1 e('/') 1 e('/') 2 e('/') 2;
    background: rgba(255, 0, 0, .4);
    z-index: 1;
  }
  .item:nth-child(2) {
    grid-area: 1 e('/') 1 e('/') 3 e('/') 3;
    background: rgba(0, 255, 0, .4);
  }
}
1
2

网格项目对齐方式 (Box Alignment)

网格轨道对齐可以相对于网格容器行和列轴。

  • justify-content 指定网格轨道沿着列轴对齐方式
  • align-content 指定网格轨道沿着行轴对齐方式

他们均包含以下几种属性值:

  • start 指定列沿着轴开始排列,justify-content 和 align-content 的默认值
  • end 列沿着轴末端开始排列
  • center 列沿着轴中间排列
  • space-around 网格容器剩余列空间分配给每列的两端
  • space-between 网格容器剩余列空间平均分配给相邻的两行/列
  • space-evenly网格容器剩余空间平均分配给行/列之间,相邻两行/列之间的间距与第一行/列和容器最左侧边级和最后一行/列与容器最右侧边缘间距相同
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

justify-content

align-content


MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress