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

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

  • 定义：指定分隔线使网格项在网格容器内定位。grid-column-start和grid-row-start确定网格项起始位置，grid-column-end，grid-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属性一次性设置所有的网格项。