当前位置：首页 > CSS

css制作网格进度条

2026-01-27 22:44:12CSS

使用CSS Grid布局制作网格进度条

通过CSS Grid布局可以轻松创建网格进度条。定义一个容器元素作为网格，子元素表示进度块。

<div class="grid-progress">
  <div class="progress-block"></div>
  <div class="progress-block"></div>
  <!-- 更多进度块 -->
</div>

.grid-progress {
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* 10列网格 */
  gap: 5px;
  width: 100%;
}

.progress-block {
  height: 20px;
  background-color: #ddd;
}

.progress-block.active {
  background-color: #4CAF50; /* 激活状态颜色 */
}

使用Flexbox实现网格进度条

Flexbox同样适用于创建网格进度条，通过flex布局控制进度块的排列。

css制作网格进度条

.flex-progress {
  display: flex;
  width: 100%;
  gap: 5px;
}

.progress-block {
  flex: 1;
  height: 20px;
  background-color: #ddd;
}

.progress-block.completed {
  background-color: #2196F3; /* 完成状态颜色 */
}

动态更新进度条

结合JavaScript可以动态更新网格进度条的进度。

css制作网格进度条

const progressBlocks = document.querySelectorAll('.progress-block');
let currentProgress = 0;

function updateProgress(percent) {
  const blocksToFill = Math.floor(percent / 10);
  progressBlocks.forEach((block, index) => {
    block.classList.toggle('active', index < blocksToFill);
  });
}

自定义网格样式

通过CSS变量可以轻松自定义网格进度条的外观。

:root {
  --progress-color: #FF5722;
  --inactive-color: #E0E0E0;
  --block-height: 15px;
}

.custom-progress {
  --gap-size: 3px;
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: var(--gap-size);
}

.custom-progress .block {
  height: var(--block-height);
  background: var(--inactive-color);
}

.custom-progress .block.filled {
  background: var(--progress-color);
}

响应式网格进度条

使用媒体查询确保网格进度条在不同设备上正常显示。

.responsive-progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
  gap: 2px;
}

@media (max-width: 600px) {
  .responsive-progress {
    grid-template-columns: repeat(auto-fit, minmax(5px, 1fr));
  }
}