后面这段css可以简写吗。.container { display: grid; grid-template-columns: 101px 101px 101px 101px 101px 101px 201px; gap: 20px; grid-template-areas: "header header header header header header header" ; }
时间: 2023-07-16 22:14:11 浏览: 57
可以简写为:
```
.container {
display: grid;
grid-template-columns: repeat(6, 101px) 201px;
gap: 20px;
grid-template-areas: "header header header header header header header";
}
```
使用 `repeat()` 函数可以快速的定义多个相同的值,避免了重复输入。
相关问题
.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 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
这段代码是在使用CSS的grid布局,将元素分成三列,并且每列的宽度相等(1fr表示相等),列之间的间距为10像素。可以将需要布局的元素包含在一个class为grid的容器中,然后设置该容器的样式为上述代码即可实现grid布局。在该容器中添加的元素会自动排列在三列中,并且每列的宽度相等,且列之间的间距为10像素。
相关推荐
![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)