CSS 网格(grid)项

  • 网格子元素(项)

    网格容器(container)包含网格项(item)。默认情况下,容器在每行中为每列都有一个网格项,但您可以设置网格项的样式,以便它们跨越多个列和/或行。

  • grid-column属性

    grid-column属性定义放置项目的列。您可以定义项目的开始位置以及项目的结束位置。

    注:grid-column属性是grid-column-startgrid-column-end属性的缩写属性。

    要放置项目,您可以参考线号,或使用关键字“span”来定义项目将跨越的列数。

    .item1 {
      grid-column: 1 / 5;
    }
    尝试一下
    .item1 {
      grid-column: 1 / span 3;
    }
    尝试一下
    .item2 {
      grid-column: 2 / span 3;
    }
    尝试一下
  • grid-row属性

    grid-row属性定义放置项目的行。您可以定义项目的开始位置以及项目的结束位置。

    注:grid-row属性是grid-row-startgrid-row-end属性的缩写属性。
    .item1 {
      grid-row: 1 / 4;
    }
    尝试一下
    .item1 {
      grid-row: 1 / span 2;
    }
    尝试一下
  • grid-area属性

    grid-area属性可用作grid-row-startgrid-column-startgrid-row-endgrid-column-end属性的简写属性。

    .item8 {
      grid-area: 1 / 2 / 5 / 6;
    }
    尝试一下
    .item8 {
      grid-area: 2 / 1 / span 2 / span 3;
    }
    尝试一下
  • 命名网格项

    grid-area属性还可用于为网格项指定名称。

    命名网格项可以由网格容器的属性grid-template-areas引用。

    .item1 {
      grid-area: myArea;
    }
    .grid-container {
      grid-template-areas: 'myArea myArea myArea myArea myArea';
    }
    尝试一下

    每行由单引号('')定义,每行中的列在单引号内定义,由空格分隔。

    注意:句点符号表示没有名称的网格项。

    .item1 {
      grid-area: myArea;
    }
    .grid-container {
      grid-template-areas: 'myArea myArea . . .';
    } 
    尝试一下

    要定义两行,请在另一组撇号内定义第二行的列:使“item1”跨越两列和两行:

    .grid-container {
      grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
    } 
    尝试一下

    为所有项命名,并制作一个可立即使用的网页模板:

    .item1 { grid-area: header; }
    .item2 { grid-area: menu; }
    .item3 { grid-area: main; }
    .item4 { grid-area: right; }
    .item5 { grid-area: footer; }
    
    .grid-container {
      grid-template-areas:
        'header header header header header header'
        'menu main main main right right'
        'menu footer footer footer footer footer';
    } 
    尝试一下
  • 网格项的顺序

    网格布局允许我们将项目放在我们喜欢的任何地方。

    HTML代码中的第一项不必显示为网格中的第一项。
    .item1 { grid-area: 1 / 3 / 2 / 4; }
    .item2 { grid-area: 2 / 3 / 3 / 4; }
    .item3 { grid-area: 1 / 1 / 2 / 2; }
    .item4 { grid-area: 1 / 2 / 2 / 3; }
    .item5 { grid-area: 2 / 1 / 3 / 2; }
    .item6 { grid-area: 2 / 2 / 3 / 3; }
    尝试一下

    您可以使用媒体查询重新排列特定屏幕尺寸的布局顺序:

    @media only screen and (max-width: 500px) {
      .item1 { grid-area: 1 / span 3 / 2 / 4; }
      .item2 { grid-area: 3 / 3 / 4 / 4; }
      .item3 { grid-area: 2 / 1 / 3 / 2; }
      .item4 { grid-area: 2 / 2 / span 2 / 3; }
      .item5 { grid-area: 3 / 1 / 4 / 2; }
      .item6 { grid-area: 2 / 3 / 3 / 4; }
    }
    尝试一下