基于CSS Grid布局实现仪表盘的方案求助

核心实现思路 #

用CSS Grid可以一次性搞定容器侧边间距、元素之间的间距，比手动调margin更精准且易维护：

• 容器内边距(padding)控制整体与侧边的1.5vw间距
• 网格间隙(gap)控制所有元素之间的1.5vw间距
• 通过grid-template-columns灵活定义列布局，支持响应式

示例代码 #

HTML结构

<div class="dashboard-container">
  <div class="dashboard-card">卡片1</div>
  <div class="dashboard-card">卡片2</div>
  <div class="dashboard-card">卡片3</div>
  <div class="dashboard-card">卡片4</div>
  <div class="dashboard-card">卡片5</div>
  <div class="dashboard-card">卡片6</div>
</div>

CSS样式

/* 仪表盘容器 */
.dashboard-container {
  /* 启用Grid布局 */
  display: grid;
  /* 容器侧边留1.5vw间距 */
  padding: 1.5vw;
  /* 元素之间的间距设为1.5vw */
  gap: 1.5vw;
  /* 自适应列：最小宽度250px，剩余空间自动均分列数 */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  /* 可选：设置容器最大宽度，避免大屏下卡片过宽 */
  max-width: 1400px;
  margin: 0 auto;
}

/* 仪表盘卡片 */
.dashboard-card {
  background: #fff;
  border-radius: 8px;
  padding: 1.5vw;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

关键代码讲解 #

1. padding: 1.5vw：给容器添加内边距，实现整体布局与页面侧边的1.5vw间距，替代手动给每个元素加margin的繁琐操作。
2. gap: 1.5vw：统一设置网格项（卡片）之间的水平、垂直间距，无需分别处理margin-left/margin-top，自动避免间距重叠问题。
3. grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))：
   • auto-fit：根据容器宽度自动调整列数，空间足够时多列，空间不足时自动换行
   • minmax(250px, 1fr)：每列最小宽度250px，最大占满剩余空间的1份，保证小屏上卡片不会过窄
4. 如果需要固定列数（比如始终3列），可以把grid-template-columns改成repeat(3, 1fr)，每列宽度均分。

内容的提问来源于stack exchange，提问作者Matthias