CSS grid-row-start 属性值说明
| 值 | 描述 |
|---|---|
| auto | 只有一行将被跨越。这是此属性的默认值。 |
| row-line | 指定项目（item）（item）显示的哪一行应该启动。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
CSS grid-row-start 属性定义网格行内项目（item）（item）的开始，向其网格位置添加跨度、线或者不添加任何内容，并指定项目（item）（item）的网格的内联开始侧。
此属性是 grid-row 速记属性的一部分。
| 初始值 | auto |
|---|---|
| 应用于 | 网格项目（item）（item）。 |
| 继承 | 无效 |
| 可动画的 | 是的。网格项的放置是有动画的。 |
| 版本 | CSS网格布局模块级别1 |
| DOM 语法 | object.style.gridrowstart =“5”; |
语法
grid-row-start: auto | row-line | initial | inherit;
grid-row-start 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 20px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 30px 0;
font-size: 30px;
}
.box {
grid-row-start: auto;
}
</style>
</head>
<body>
<h2>Grid-row-start 属性示例</h2>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div class="box">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
grid-row-start 属性的示例，其中第三个框从第一行开始：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 20px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 30px 0;
font-size: 30px;
}
.box {
grid-row-start: 1;
}
</style>
</head>
<body>
<h2>Grid-row-start 属性示例</h2>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div class="box">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
grid-row-start 属性的示例，其中第四个框从第二行开始：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 20px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 30px 0;
font-size: 30px;
}
.box {
grid-row-start: 2;
}
</style>
</head>
<body>
<h2>Grid-row-start 属性示例</h2>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div class="box">4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
日期：2020-06-02 22:14:34 来源：oir作者：oir