Grid 的完整介绍(三)

接着上篇 blog,这篇继续介绍 Grid 的网格子项属性,内容没有那么长了。

原文地址见这里:A Complete Guide to Grid

Grid 的完整介绍(三)

网格子项的属性

grid-column-start

grid-column-end

grid-row-start

grid-row-end

通过参考指定的网格线来决定网格中一个网格子项的位置,grid-column-start/grid-row-start是指网格子项开始的线,grid-column-end/grid-row-end是指网格子项结束的线。

值有:

  • <line> – 可以是一个数字以适用被标记了数字号的网格线,或者是一个名字以适用命名了的网格线
  • span <number> – 子项将跨越指定数字的网格轨迹
  • span <name> – 子项将跨越到指定名字之前的网格线
  • auto – 表示自动布局,自动跨越或者默认跨越一个
1
2
3
4
5
6
.item{
  grid-column-start: <number> | <name> | span <number> | span <name> | auto
  grid-column-end: <number> | <name> | span <number> | span <name> | auto
  grid-row-start: <number> | <name> | span <number> | span <name> | auto
  grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

举个例子:

1
2
3
4
5
6
.item-a{
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start
  grid-row-end: 3
}

1
2
3
4
5
6
.item-b{
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2
  grid-row-end: span 2
}

如果grid-column-end/grid-row-end没有生命,网格子项将默认跨越一个网格轨迹。

网格子项可以互相重叠,你可以使用z-index来控制他们的层叠顺序。

grid-column

grid-row

grid-column-start + grid-column-end,和grid-row-start + grid-row-end的简写,分别独立。

值有:

  • <start-line> / <end-line> – 每一个属性都可以接收普通模式的值,包括span
1
2
3
4
.item{
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

举例:

1
2
3
4
.item-c{
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

如果没有声明结束网格线的值,那么网格子项将默认跨越 1 个网格轨迹。

grid-area

给网格子项取一个名字以让它被由grid-template-areas属性创建的模板引用。同时,这个属性也可以用来更简短地表示grid-row-start+ grid-column-start + grid-row-end+ grid-column-end

值有:

  • <name> – 一个你选择的名字
  • <row-start> / <column-start> / <row-end> / <column-end> – 可以是网格线的数字或名字
1
2
3
.item{
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

举例:

作为分配一个名字给网格子项的一种方式:

1
2
3
4
.item{
.item-d{
  grid-area: header
}

作为grid-row-start+ grid-column-start + grid-row-end+ grid-column-end的一种简写:

1
2
3
.item-d{
  grid-area: 1 / col4-start / last-line / 6
}

justify-self

让网格子项的内容以列轴对齐(与之相反align-self是跟行轴对齐),这个值可以应用在单个网格子项的内容中。

值有:

  • start – 让内容在网格区域左对齐
  • end – 让内容在网格区域右对齐
  • center – 让内容在网格区域中间对齐
  • stretch – 填充着呢个网络区域的宽度(默认值)
1
2
3
.item{
  justify-self: start | end | center | stretch;
}

举例:

1
2
3
.item-a{
  justify-self: start;
}

1
2
3
.item-a{
  justify-self: end;
}

1
2
3
.item-a{
  justify-self: center;
}

1
2
3
.item-a{
  justify-self: stretch;
}

为了让网格中的所有子项都对齐,这个行为也可以通过设置网格容器中的justify-items属性来实现。

align-self

让网格子项的内容以行轴对齐(与之相反justify-self是跟列轴对齐),这个值可以应用在单个网格子项的内容中。

值有:

  • start – 让内容在网格区域上对齐
  • end – 让内容在网格区域下对齐
  • center – 让内容在网格区域中间对齐
  • stretch – 填充着呢个网络区域的高度(默认值)
1
2
3
.item{
  align-self: start | end | center | stretch;
}

举例:

1
2
3
.item-a{
  align-self: start;
}

1
2
3
.item-a{
  align-self: end;
}

1
2
3
.item-a{
  align-self: center;
}

1
2
3
.item-a{
  align-self: stretch;
}

为了让网格中的所有子项都对齐,这个行为也可以通过设置网格容器中的align-items属性来实现。

Comments