css grid布局 子元素自动换行 各个子元素水平间距20px,垂直间距50px
时间: 2024-05-23 16:08:05 浏览: 12
CSS Grid 布局是一种二维网格布局系统,它可以帮助我们轻松地创建复杂的布局。要实现子元素自动换行、各个子元素水平间距20px、垂直间距50px的效果,可以参考以下代码:
```html
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
```
```css
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 自动换行 */
grid-gap: 50px 20px; /* 垂直间距50px,水平间距20px */
}
.grid-item {
background-color: #ddd;
text-align: center;
}
```
这段代码会创建一个包含六个子元素的网格容器,并将子元素自动布局到网格中。`grid-template-columns` 属性的 `repeat(auto-fit, minmax(100px, 1fr))` 部分会让子元素自动换行,同时保证每个网格列的最小宽度为 100px,最大宽度为网格容器的宽度。 `grid-gap` 属性则用于设置网格行列之间的间距。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)