CSS 网格(grid)项
-
网格子元素(项)
网格容器(container)包含网格项(item)。默认情况下,容器在每行中为每列都有一个网格项,但您可以设置网格项的样式,以便它们跨越多个列和/或行。
-
-
-
-
命名网格项
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; } }