如何将CSS Grid悬停动画示例改造为实用网页交互模块？

需求 #

我需要将现有的网格示例重构为更实用的版本，使其能够作为网页上的可交互区域使用。

现有代码 #

HTML #

<div class="wrapper">
  <div class="box a"></div>
  <div class="box b"></div>
  <div class="box c"></div>
  <div class="box d"></div>
  <div class="box e"></div>
  <div class="box f"></div>
  <div class="box a"></div>
  <div class="box b"></div>
  <div class="box c"></div>
  <div class="box d"></div>
  <div class="box e"></div>
  <div class="box f"></div>
</div>

CSS #

.wrapper {
  overflow: hidden;
  width: 100vw;
  display: grid;
  grid-template-columns: 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px;
  grid-gap: 0px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #fff;
  color: #fff;
  border: 0.001em solid #efefef;
  border-radius: 0px;
  padding: 0px;
  height:17px;
  transition: all 1s ease-out;
  transition-delay: 0.2s;
}

.box:hover {
  background-color: #FF5400;
  border: 0.001em solid #FF5400;
  transition: all 0.1s ease-out;
}

.box.d:hover {
  background-color: #2BD1F8 !important;
  border: 0.001em solid #2BD1F8;
  transition: all 0.1s ease-out;
}

重构优化方案 #

1. 响应式适配优化 #

原网格使用固定列宽，在不同屏幕下适配性差。改用fr单位实现自适应列宽，同时限制容器最大宽度并居中：

.wrapper {
  overflow: hidden;
  width: min(100%, 600px); /* 适配小屏，限制最大宽度 */
  margin: 1rem auto; /* 居中并添加上下间距 */
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6列等宽分配 */
  grid-gap: 2px; /* 增加间距提升可读性 */
  background-color: #f5f5f5;
  padding: 10px;
}

2. 强化交互体验 #

修复原CSS语法错误，添加点击选中状态和光标提示，优化过渡动画：

.box {
  background-color: #fff;
  border: 1px solid #efefef;
  border-radius: 2px;
  height: 24px; /* 扩大点击区域 */
  transition: all 0.3s ease; /* 统一过渡效果 */
  cursor: pointer; /* 提示可交互 */
}

.box:hover {
  background-color: #FF5400;
  border-color: #FF5400;
}

.box.d:hover {
  background-color: #2BD1F8;
  border-color: #2BD1F8;
}

/* 点击选中状态 */
.box.active {
  background-color: #E64A19;
  border-color: #E64A19;
}

.box.d.active {
  background-color: #0288D1;
  border-color: #0288D1;
}

3. 提升可维护性 #

用JavaScript批量生成网格元素，减少HTML重复代码，同时添加数据属性便于逻辑扩展：

<div class="wrapper" id="interactiveGrid"></div>

const grid = document.getElementById('interactiveGrid');
const boxTypes = ['a', 'b', 'c', 'd', 'e', 'f'];
const rowCount = 2;

// 批量生成网格项
for (let i = 0; i < rowCount; i++) {
  boxTypes.forEach(type => {
    const box = document.createElement('div');
    box.className = `box ${type}`;
    box.dataset.type = type;
    
    // 绑定点击事件
    box.addEventListener('click', () => {
      box.classList.toggle('active');
      // 这里可扩展对应类型的交互逻辑，比如触发弹窗、提交数据等
      console.log(`选中了类型: ${type}`);
    });
    
    grid.appendChild(box);
  });
}

4. 功能扩展方向 #

• 支持按住Ctrl/Shift键批量选择网格项
• 为不同类型的网格项绑定专属交互（如点击d类项展示详情）
• 添加重置按钮，一键清除所有选中状态
• 适配键盘导航，支持Tab切换+Enter选中操作

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