本篇详细介网格属性表中的各个属性值和其用法。

grid-column-start / grid-column-end /grid-row-start / grid-row-end

  • 定义:指定分隔线使网格项网格容器内定位。grid-column-startgrid-row-start确定网格项起始位置,grid-column-endgrid-row-end确定网格项结束位置。
  • 值:
    • \分隔线序号,或者分隔线名称
    • span\网格项从起始分隔线走过的网格轨道数量
    • span\网格项会扩展到给定分隔线名字的位置
    • auto:自动定位和扩展,默认会扩展一个网格轨道宽度(长度)
      1. .item {
      2. grid-column-start: <number> | <name> | span <number> | span <name> | auto
      3. grid-column-end: <number> | <name> | span <number> | span <name> | auto
      4. grid-row-start: <number> | <name> | span <number> | span <name> | auto
      5. grid-row-end: <number> | <name> | span <number> | span <name> | auto
      6. }
  • 示例:
    1. .item-a {
    2. grid-column-start: 2;
    3. grid-column-end: five;
    4. grid-row-start: row1-start
    5. grid-row-end: 3
    6. }
    网格项位置
    1. .item-b {
    2. grid-column-start: 1;
    3. grid-column-end: span col4-start;
    4. grid-row-start: 2
    5. grid-row-end: span 2
    6. }
    网格项位置
  • 如果没有指定grid-column-end / grid-row-end,那么网格项会默认占用一格网格轨道。
  • 可以指定z-index控制网格项重叠。

    grid-column / grid-row

  • 定义:grid-column-start / grid-column-end /grid-row-start / grid-row-end的对应缩写形式。
  • 值:
    • \ / \:每一项都接受其原本的值类型(见上)
      1. .item {
      2. grid-column: <start-line> / <end-line> | <start-line> / span <value>;
      3. grid-row: <start-line> / <end-line> | <start-line> / span <value>;
      4. }
  • 示例:
    1. .item-c {
    2. grid-column: 3 / span 2;
    3. grid-row: third-line / 4;
    4. }
    网格项位置缩写形式
  • 如果不指定分隔线结束位置,那么网格项默认占1个网格轨道

    grid-area

  • 定义:定义一组网格项的名称,这样网格容器grid-template-areas属性就能使用它们了。这个属性甚至可当做grid-row-start + grid-column-start + grid-row-end + grid-column-end的缩写。
  • 值:
    • \:你所选的名称
    • \ / \ / \ / \:数字或分隔线名称
      1. .item {
      2. grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
      3. }
  • 示例:
    网格项设置一个名称
    1. .item-d {
    2. grid-area: header
    3. }
    作为grid-row-start + grid-column-start + grid-row-end + grid-column-end属性的缩写形式
    1. .item-d {
    2. grid-area: 1 / col4-start / last-line / 6
    3. }
    网格区域

    justify-self

  • 定义:将网格项内的内容沿【行】对齐(x轴对齐),而align-self是与【列】对齐(y轴对齐)。这个属性会影响每一个网格项的内容。
  • 值:
    • start:将内容沿左侧对齐
    • end:将内容沿右侧对齐
    • center:将内容左右居中对齐
    • stretch:拉伸至网格项的宽度(默认)
  • 示例:
    1. .item-a {
    2. justify-self: start;
    3. }
    x轴对齐-左对齐
    1. .item-a {
    2. justify-self: end;
    3. }
    x轴对齐-右对齐
    1. .item-a {
    2. justify-self: center;
    3. }
    x轴对齐-居中对齐
    1. .item-a {
    2. justify-self: stretch;
    3. }
    x轴对齐-拉伸
  • 你可以通过网格容器justify-items属性一次性设置所有的网格项

    align-self

  • 定义:将网格项内的内容沿【列】对齐(y轴对齐),而justify-self是与【行】对齐(x轴对齐)。这个属性会影响每一个网格项的内容。
  • 值:
    • start:将内容沿顶部对齐
    • end:将内容沿底部对齐
    • center:将内容垂直居中对齐
    • stretch:拉伸至网格项的高度(默认)
      1. .item{
      2. align-self: start | end | center | stretch;
      3. }
  • 示例:
    1. .item-a {
    2. align****-self: start;
    3. }
    x轴对齐-左对齐
    1. .item-a {
    2. align-self: end;
    3. }
    x轴对齐-右对齐
    1. .item-a {
    2. align-self: center;
    3. }
    x轴对齐-居中对齐
    1. .item-a {
    2. align-self: stretch;
    3. }
    x轴对齐-拉伸
  • 你可以通过网格容器align-items属性一次性设置所有的网格项