CSS grid-row 属性

grid-row属性用于定义网格项目的行位置。它可以通过指定行的开始和结束位置来控制网格项跨越的行数。这个属性是 grid-row-start 和 grid-row-end 的简写形式。

基本概念

在CSS网格布局中，grid-row属性允许开发者控制网格项目在行方向上的起始和结束位置。通过设置该属性，可以轻松地将一个项目放置到网格中的任意行，甚至跨多行显示。

语法

// www.javascriptcn.com code example
/* 关键字 */
grid-row: auto;

/* <custom-ident> */
grid-row: some-name;

/* <integer> && <custom-ident>? */
grid-row: 2;
grid-row: 2 some-name;

/* span && [ <number> | <custom-ident> ] */
grid-row: span 3;
grid-row: span 3 some-name;
grid-row: span some-name;

/* Global values */
grid-row: inherit;
grid-row: initial;
grid-row: unset;

取值说明

• auto: 默认值。项目将被放置在其默认的行位置。
• <custom-ident>: 一个自定义标识符，通常用于命名模板区域。
• <integer>: 行的索引编号。正数表示从网格容器的顶部开始计数，负数表示从底部开始计数。
• span <number>: 项目将跨越指定数量的行。数字必须为正整数。
• span <custom-ident>: 与 <custom-ident> 结合使用时，表示跨越特定的命名行。

示例

基础示例

.item {
    grid-row: 2; /* 将项目放置在第二行 */
}

跨越多行

.item {
    grid-row: span 3; /* 项目跨越三行 */
}

使用自定义标识符

// www.javascriptcn.com code example
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);
    grid-template-areas:
        "header header header"
        "main main aside"
        "footer footer footer";
}

.item1 {
    grid-area: header;
}

.item2 {
    grid-area: main;
    grid-row: span 2; /* 主要内容跨越两行 */
}

.item3 {
    grid-area: aside;
}

.item4 {
    grid-area: footer;
}

实际应用

在实际项目中，grid-row属性常用于创建复杂布局，如杂志风格的文章布局、产品展示页面等。通过灵活使用此属性，可以实现对齐方式、空间分布等方面的精细控制。

注意事项

• 当同时设置了 grid-row 和 grid-column 属性时，应确保它们的组合不会导致重叠或超出网格容器范围的情况。
• 使用 span 关键字时，需要特别注意其数值，避免产生不必要的视觉效果。

浏览器兼容性

grid-row 属性在现代浏览器中得到了广泛支持，但在一些较旧版本的浏览器中可能不被支持。为了保证最佳的兼容性，建议使用Autoprefixer等工具来自动添加必要的前缀。

兼容性表

总结

grid-row 属性是CSS Grid布局中的一个重要组成部分，通过它可以精确地控制网格项目在行方向上的位置。掌握好这一属性，对于构建复杂的网格布局非常有帮助。希望本章的内容能够帮助你更好地理解和运用 grid-row 属性。