CSS grid-row 属性
CSS grid-row 属性
CSS grid-row 属性是CSS网格布局中的一种属性,它控制网格元素所在的行范围。
语法
grid-row: <start-line> / <end-line> | <start-line> / span <row-span> | <grid-line> | span <row-span>;
start-line
:规定网格元素的起始行。end-line
:规定网格元素的结束行。row-span
:规定网格元素要跨越的行数。grid-line
:规定网格元素所在的行。
属性值
start-line 和 end-line
在网格布局中,可以使用 start-line
和 end-line
来定义一个网格元素所在网格中的行范围。以下是一些示例:
.item {
grid-row: 1 / 3; /* 元素位于第1行至第3行 */
}
.item {
grid-row: 2 / span 3; /* 元素位于第2行,并且要跨越3行 */
}
row-span
row-span
属性用来为一个网格元素指定它要跨越的行数。例如:
.item {
grid-row: span 2; /* 元素要跨越2行 */
}
grid-line
在网格布局中,每条水平的网格线和每条垂直的网格线都可以被标记为一个网格线。这些网格线可以用来定义网格元素的位置。如果您只想在一个网格线上定义一个网格元素,则可以使用以下方式:
.item {
grid-row: 2; /* 元素位于第2行 */
}
实例
以下是一些使用 grid-row
属性的示例:
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
}
.item1 {
grid-row: 1 / 3;
}
.item2 {
grid-row: 1 / 3;
}
.item3 {
grid-row: 2 / 4;
}
.item4 {
grid-row: span 2;
}
在上面的示例中,我们创建了一个三行三列的网格布局,并在其内部放置了四个网格元素。其中,.item1
和 .item2
跨越了第一和第二行,.item3
跨越了第二和第三行,而 .item4
则跨越了第三和第四行。
总结
CSS grid-row 属性是CSS网格布局中的一种属性,它控制网格元素所在的行范围。可以使用 start-line
和 end-line
来定义一个网格元素所在网格中的行范围,使用 row-span
属性来指定一个网格元素要跨越的行数,使用 grid-line
来为网格元素指定它所在的行。