首页css瀑布流布局代码

css瀑布流布局代码

时间: 2024-08-30 22:02:46 浏览: 70

CSS瀑布流布局（也称为 Masonry 或 Grid Layout）是一种常见的网页布局方式，主要用于无固定宽度项目（如图片）的排列。下面是一个基础的HTML和CSS实现例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 最小200px宽度，最大自适应 */ gap: 10px; /* 列之间的间距 */ padding: 10px; } .box { background-color: #f1f1f1; border: 1px solid #ccc; padding: 20px; margin-bottom: 10px; } </style> </head> <body> <div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> <div class="box">Box 4</div> <div class="box">Box 5</div>  </div> </body> </html> ``` 在这个例子中，`.container` 是网格容器，`.box` 是每个项目的容器。`grid-template-columns` 使用了 `repeat(auto-fit, minmax(200px, 1fr))`，这意味着每个列的宽度将尽可能地填充空间，但最小宽度为200像素，如果剩余空间不足，则自动换行。

阅读全文