CSS 网格(grid)项 网格子元素(项) 网格容器(container)包含网格项(item)。默认情况下,容器在每行中为每列都有一个网格项,但您可以设置网格项的样式,以便它们跨越多个列和/或行。 grid-column属性 grid-column属性定义放置项目的列。您可以定义项目的开始位置以及项目的结束位置。 注:grid-column属性是grid-column-start和grid-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-start和grid-row-end属性的缩写属性。 .item1 { grid-row: 1 / 4; }复制尝试一下 .item1 { grid-row: 1 / span 2; }复制尝试一下 grid-area属性 grid-area属性可用作grid-row-start,grid-column-start,grid-row-end和grid-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; } }复制尝试一下