瀑布流布局使用grid布局实现 css完整代码
时间: 2023-12-02 13:43:18 浏览: 203
JavaScript瀑布流布局实现代码
以下是使用grid布局实现瀑布流布局的CSS代码:
```css
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 20px;
}
.item {
background-color: #ccc;
border-radius: 5px;
padding: 10px;
}
```
其中,`.container`是包含所有瀑布流元素的容器,`.item`是每个瀑布流元素的类名。`grid-template-columns`属性指定了每一列的宽度,`repeat(auto-fit, minmax(250px, 1fr))`表示自动适应宽度,最小宽度为250px,最大宽度为1fr。`grid-gap`属性指定了每个元素之间的间距。
需要注意的是,这段代码只是实现了瀑布流布局的基本框架,具体的元素排列需要根据实际情况进行调整。
阅读全文