如何构建元素直接上下对齐的网格实现仪表板布局块紧密堆叠

DevOps 小满

2026-10-10

解决方案

你要实现的紧凑卡片堆叠属于典型的瀑布流网格布局，使用CSS Grid可以原生实现该效果，无需引入额外脚本。修改代码如下：

核心修改点

替换原有的浮动布局为Grid布局，新增/修改如下CSS规则：

/* 新增grid容器规则 */
.dashboard_flex {
  display: grid;
  grid-template-columns: repeat(5, var(--w1));
  gap: var(--p);
  padding: 0 var(--p);
}

/* 给宽度类新增跨列配置 */
.w1 {
  width: 100%;
  grid-column: span 1;
}
.w2 {
  width: 100%;
  grid-column: span 2;
}
.w3 {
  width: 100%;
  grid-column: span 3;
}
.w4 {
  width: 100%;
  grid-column: span 4;
}

/* 给高度类新增跨行配置 */
.h1 {
  height: 100%;
  grid-row: span 1;
}
.h2 {
  height: 100%;
  grid-row: span 2;
}
.h3 {
  height: 100%;
  grid-row: span 3;
}
.h4 {
  height: 100%;
  grid-row: span 4;
}
.h5 {
  height: 100%;
  grid-row: span 5;
}

/* 调整widget样式，移除冗余规则 */
.widget {
  border-radius: 5px;
  background: var(--dashboard_bg);
  display: flex;
  align-items: center;
  justify-content: center;
}