CSS - grid-row 属性



CSS grid-row 是一个简写属性,用于通过指定行、跨度或依靠自动放置来控制网格项在网格容器中行方向上的位置。它是单个网格相关属性的简写:grid-row-startgrid-row-end

语法

grid-row: auto | grid-row-start / grid-row-end;

属性值

描述
auto 元素的大小取决于内容或可用空间。
grid-row-start 它指定网格项在网格行中的起始位置。
grid-row-end 它指定在哪个行线停止显示项目或跨越多少行。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS Grid row 属性示例

以下示例解释了使用不同值的 grid-row 属性。

使用 Auto 值的 Grid Row 属性

为了让网格元素的大小根据其内容或可用空间自动确定,我们使用 auto 值。它允许网格项根据其内容调整自身大小或适应可用的网格空间。这在下面的示例中显示。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 10px; background-color: #f0f0f0; } .grid-item { background-color: lightcoral; border: 3px solid blue; padding: 20px; text-align: center; color: white; grid-row: auto; } </style> </head> <body> <h2> CSS grid-row property </h2> <h4> grid-row: auto </h4> <div class="grid-container"> <div class="grid-item"> Item 1 </div> <div class="grid-item"> Item 2 </div> <div class="grid-item"> Item 3 </div> <div class="grid-item"> Item 4 </div> <div class="grid-item"> Item 5 </div> </div> </body> </html>

使用整数的 Grid Row 属性

为了根据网格容器的行数确定网格元素的大小,我们指定起始行线号和结束行线号。根据指定的值,元素的大小将进行调整。这在下面的示例中显示。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 10px; background-color: #f0f0f0; } .grid-item { background-color: lightcoral; border: 2px solid #ff6b6b; padding: 20px; text-align: center; color: white; } .items{ border: 3px solid blue; } .item1 { grid-row: 1 / 3; } .item2 { grid-row: 2 / 3; } </style> </head> <body> <h2> CSS grid-row property </h2> <h4> grid-row: 1 / 3 (item1), and 2/3 (item2) </h4> <p> item1- starts at row-line 1 and ends at row-line 3 </p> <p> item2- starts at row-line 2 and ends at row-line 3 </p> <div class="grid-container"> <div class="grid-item item1 items"> Item 1 </div> <div class="grid-item item2 items"> Item 2 </div> <div class="grid-item"> Item 3 </div> <div class="grid-item"> Item 4 </div> <div class="grid-item"> Item 5 </div> </div> </body> </html>

使用 Span 值的 Grid Row 属性

为了确定网格元素的大小,我们可以使用 span 指定它将占据的行数空间(例如,span 2 元素将占据 2 行空间)。这在下面的示例中显示。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 10px; background-color: #f0f0f0; } .grid-item { background-color: lightcoral; border: 2px solid #ff6b6b; padding: 20px; text-align: center; color: white; } .items{ border: 3px solid blue; } .item1 { grid-row: span 3; } .item2 { grid-row: 2 / span 2; } </style> </head> <body> <h2> CSS grid-row property </h2> <h4> grid-row:span 3 (item1), 2 / span 2 (item2) </h4> <p> item1- starts at row-line 1 and spans 3 rows </p> <p> item2- starts at row-line 2 and spans 2 rows </p> <div class="grid-container"> <div class="grid-item item1 items"> Item 1 </div> <div class="grid-item item2 items"> Item 2 </div> <div class="grid-item"> Item 3 </div> <div class="grid-item"> Item 4 </div> <div class="grid-item"> Item 5 </div> </div> </body> </html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
grid-row 57 16 52 10 44
css_properties_reference.htm
广告