css制作网格进度条
使用CSS Grid布局创建网格进度条
通过CSS Grid可以轻松实现网格化的进度条效果。以下是一个基础实现方式：
.progress-grid {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 4px;
width: 300px;
}
.grid-item {
height: 20px;
background-color: #e0e0e0;
border-radius: 2px;
}
.grid-item.active {
background-color: #4CAF50;
}<div class="progress-grid">
<div class="grid-item active"></div>
<div class="grid-item active"></div>
<div class="grid-item active"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>动态控制进度百分比
使用JavaScript可以动态控制进度百分比：
function setProgress(percent) {
const items = document.querySelectorAll('.grid-item');
const activeCount = Math.floor(items.length * percent / 100);
items.forEach((item, index) => {
item.classList.toggle('active', index < activeCount);
});
}
// 设置进度为60%
setProgress(60);添加动画效果
为进度变化添加平滑过渡：
.grid-item {
transition: background-color 0.3s ease;
}响应式设计
让网格进度条适应不同屏幕尺寸：
.progress-grid {
width: 100%;
max-width: 500px;
}自定义样式选项
扩展更多样式选项：
.grid-item.warning {
background-color: #FFC107;
}
.grid-item.error {
background-color: #F44336;
}垂直方向网格进度条
创建垂直方向的变体：
.vertical-progress {
grid-template-columns: 1fr;
grid-template-rows: repeat(10, 1fr);
height: 200px;
}这些方法提供了创建网格进度条的基本框架，可以根据具体需求调整网格数量、颜色和尺寸等参数。
