CSS3 grid-rows 属性
CSS3 grid-rows 属性
grid-rows 是 CSS3 中定义网格布局的一个属性。它指定网格容器中行的大小和位置。这个属性仅在定义了网格容器后才能使用。
基本使用方法
以下是一个示例网格布局：
<div class="grid-container">
<div class="grid-item item1">1</div>
<div class="grid-item item2">2</div>
<div class="grid-item item3">3</div>
<div class="grid-item item4">4</div>
<div class="grid-item item5">5</div>
<div class="grid-item item6">6</div>
</div>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
}
.grid-item {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 20px;
font-size: 30px;
text-align: center;
}
该布局有两行，三列，每个格子都是同样大小。接下来，可以使用 grid-rows 属性来对行的大小和位置进行调整。
以下是一些 grid-rows 的常见用法：
1. 指定行的大小
.grid-container {
grid-template-rows: 100px 200px 300px;
}
在这个例子中，第一行的高度为 100px，第二行的高度为 200px，第三行的高度为 300px。
2. 指定行的位置
.grid-container {
grid-template-rows: 100px auto 200px;
}
在这个例子中，第一行的高度为 100px，第三行的高度为 200px，第二行则填满剩余空间（因为使用了 auto）。
3. 等分行高度
.grid-container {
grid-template-rows: repeat(3, 1fr);
}
在这个例子中，网格将被分成三行，每行的高度都是相等的。 fr 的值表示网格总空间的比例分配方式，如果有多个 fr，则网格总空间被分成相等的部分。
4. 自动适应行高
.grid-container {
grid-template-rows: auto auto 1fr;
}
在这个例子中，第一行和第二行高度自适应他们的内容。第三行填满剩余空间。
属性值
grid-rows 属性的常见属性值如下：
| 属性值 | 描述 |
|---|---|
length |
定义固定的行高度 |
auto |
行高自适应内容 |
min-content |
行高自适应最小内容 |
max-content |
行高自适应最大内容 |
fr |
指定行高分配方式 |
span |
指定行的跨度 |
<line> |
指定行线位置 |
结论
grid-rows 属性是 CSS3 网格布局中一个非常有用的属性，它可以帮助开发者控制网格的行高度和位置。该属性提供了多种实用的选项，可以满足各种网格布局的需求。开发者应该根据具体情况灵活选择。