grid-template-rows: 30rpx;
时间: 2024-01-20 10:29:41 浏览: 28
这是一个CSS中的grid布局属性,用于定义网格容器中的行数和行高。在这个示例中,`grid-template-rows`属性的值为`30rpx`。
这样设置的效果是,网格容器中的每一行的高度都固定为30像素(rpx为小程序中的像素单位)。无论网格容器的高度如何,都会保持每一行的高度为30像素。
需要注意的是,如果网格容器中有多个行,则每一行的高度都会被设置为30像素。如果网格容器中的内容超出了行的高度,可能会导致内容溢出或被截断。
相关问题
.container { display: grid; grid-template-columns: 7fr 3fr; grid-template-rows: auto; height: calc(100vh - 4rem); }固定左右大小
你可以使用 `grid-template-areas` 来指定左右两个区域的大小,例如:
```css
.container {
display: grid;
grid-template-columns: 7fr 3fr;
grid-template-areas: "left right";
height: calc(100vh - 4rem);
}
.left {
grid-area: left;
}
.right {
grid-area: right;
}
```
然后在 HTML 中为左右两个区域分别创建对应的元素,并设置它们的 `grid-area` 属性为 `left` 和 `right`,例如:
```html
<div class="container">
<div class="left">左侧区域</div>
<div class="right">右侧区域</div>
</div>
```
grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr);
这是CSS Grid布局中用来定义网格列和网格行的属性。其中,`grid-template-columns`定义了6列,每列的宽度为父容器宽度的1/6,`grid-template-rows`定义了4行,每行的高度为父容器高度的1/4。这意味着会创建一个6列4行的网格布局。在这个网格布局中,每个单元格的大小都相同。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)