css 瀑布流布局grid

作者：▄对对碰发布日期:2025-07-30 浏览:82

/* 使用 CSS Grid 实现瀑布流布局的示例代码 */

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.item {
  background-color: #f0f0f0;
  padding: 16px;
  border-radius: 8px;
}

/* 解释说明：
1. .container 是父容器，使用了 `display: grid` 来启用网格布局。
2. `grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))` 表示列的数量会根据容器宽度自动调整，每列的最小宽度为 200px，最大宽度为 1fr（即剩余空间均分）。
3. `gap: 16px` 设置了网格项之间的间距。
4. .item 是每个网格项的样式，设置了背景颜色、内边距和圆角。
*/

上一篇：css文字超长省略号

下一篇：css 红色