CSS grid-row-end 属性值说明
| 值 | 描述 |
|---|---|
| auto | 只跨越一列。这是此属性的默认值。 |
| span n | 指定行的数量。 |
| column-line | 指定该项目（item）（item）的显示应结束的行。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
grid-row-end 属性用于指定在哪一行停止显示项目（item）（item）或者项目（item）（item）将跨越多少行。
不应直接初始化容器中项目（item）（item）的宽度和高度。
当它们被初始化时，我们看不到跨度效应。
| 初始值 | auto |
|---|---|
| 应用于 | 网格项目（item）（item）。 |
| 继承 | 无效 |
| 可动画的 | 是的。 |
| 版本 | CSS网格布局模块级别1 |
| DOM 语法 | object.style.gridrowend =“4”; |
语法
grid-row-end: auto | row-line | span n | inherit | initial | unset;
grid-row-end 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #666;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.box {
grid-row-end: auto;
}
</style>
</head>
<body>
<h2>Grid-row-end 属性示例</h2>
<div class="grid-container">
<div class="box">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
其中我们将 grid-row-end 属性指定为“auto”。
在下一个示例中，跨越了三个项目（item）（item）。
指定为“span 3”的 grid-row-end 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #666;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.box {
grid-row-end: span 3;
}
</style>
</head>
<body>
<h2>Grid-row-end 属性示例</h2>
<div class="grid-container">
<div>1</div>
<div class="box">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
日期：2020-06-02 22:14:34 来源：oir作者：oir