CSS 属性

CSS grid-row-end 属性通过指定行、跨度或依赖自动放置来确定网格项在网格行中应结束的行。它定义网格区域的内联结束边缘。

属性值

  • auto: 它自动确定网格项目在网格区域内的位置网格布局。默认范围为 1。

  • <custom-ident>: 如果有一行标有"<custom-ident>-start"或"<custom-ident>-end"，则网格项将为沿着该线定位。

    • 使用命名网格区域时，会创建隐式线。网格行结束:foo;指定命名区域的结束边缘，除非通过 foo-end 等行明确指定。

  • <integer> && <custom-ident>? − 如果给出了名称，则仅考虑具有该名称的行。如果具有该名称的线不足，则所有网格线都会按具有该名称的方式进行处理，以确定正确的位置。 <integer> 值为 0 无效。

  • span && [ <integer> || <custom-ident> ]: 当名称被指定为自定义标识时，仅考虑具有该名称的行。如果具有该名称的行不足，我们会考虑网格相关侧的所有网格线都具有该名称计数目的。如果没有指定<integer>，则默认值为1。不允许使用负数或0。

定义命名网格区域时，它会自动创建相应的命名线该区域的末端。因此，如果将 grid-row-end 属性设置为 foo，则该元素将定位在所识别的网格区域的结束边缘，除非您显式定义了名为 foo-end 的行。

适用范围

网格项和绝对定位的框，其包含块是网格容器。

DOM 语法

object.style.gridRowEnd = "auto|<custom-ident>|<integer> && <custom-ident>?|span && [ <integer> || <custom-ident> ]";

CSS grid-row-end: auto 

下面的示例说明了 grid-row-end: auto 属性会自动按照网格项在代码中出现的顺序放置网格项 -

<html>
<head>
<style>  
   .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      color: white;
      text-align: center;
      background-color: lightgreen;
   }
   .grid-container > div {
      background-color: red;
      margin: 5px;
      padding: 5px; 
   }
   .grid-column-item1 {
      grid-row-end: auto;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div class="grid-column-item1">Grid item 1</div>
      <div>Grid item 2</div>
      <div>Grid item 3</div>
      <div>Grid item 4</div>
      <div>Grid item 5</div>
      <div>Grid item 6</div>
   </div>
</body>
</html>

CSS grid-row-end: <custom -ident>

grid-template-rows:[a] 50px [b] 50px [c] 50px；属性创建名为 a、b 和 c 的三行。

以下示例演示 grid-row-end: c 属性指定第一个网格项的结束边缘将在第三个网格项的起始边缘结束排。 −

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template-rows: [a] 50px [b] 50px [c] 50px;  
      grid-template-columns: auto auto;
      background-color: lightgreen;
      padding: 5px;
   }
   .grid-container > div {
      background-color: red;
      border: 2px solid blue;
      padding: 10px;
      text-align: center;
   }
   .grid-item {
      grid-row-end: c; 
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div class="grid-item">Grid Item 1</div>
      <div>Grid Item 2</div>
      <div>Grid Item 3</div>
      <div>Grid Item 4</div>
      <div>Grid Item 5</div>
   </div>
</body>
</html>

CSS grid-row-end: <integer> && <custom-ident>？

grid-template-rows:[a] 50px [b] 50px [a] 50px [a ];属性创建名为 a 和 b 的三行。

grid-row-end: 3 a;属性，表示第二个网格项结束于第三个"a"命名线，即第四条网格线。

下图演示了带有线的列布局:

CSS grid grid-row-end

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template-rows: [a] 50px [b] 50px [a] 50px [a];
      grid-template-columns: auto auto;
      background-color: lightgreen;
      padding: 5px;
   }
   .grid-container > div {
      background-color: red;
      border: 2px solid blue;
      padding: 10px;
      text-align: center;
   }
   .grid-item {
      grid-row-end: 3 a;   /* The third `a` named line, which is the fourth grid line.*/
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div>Grid Item 1</div>
      <div class="grid-item">Grid Item 2</div>
      <div>Grid Item 3</div>
      <div>Grid Item 4</div>
      <div>Grid Item 5</div>
   </div>
</body>
</html>

CSS grid-row-end: span Value

下面的示例演示了 grid-row-end: span 3 属性指定第一个网格项跨越三行 -

<html>
<head>
<style>  
   .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      color: white;
      text-align: center;
      width: 360px;
      background-color: lightgreen;
   }
   .grid-container > div {
      background-color: red;
      margin: 5px;
      padding: 5px; 
   }
   .grid-column-item1 {
      grid-row-end: span 3;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div class="grid-column-item1">Grid item 1</div>
      <div>Grid item 2</div>
      <div>Grid item 3</div>
      <div>Grid item 4</div>
      <div>Grid item 5</div>
      <div>Grid item 6</div>
   </div>
</body>
</html>