当前位置：首页 > JavaScript

js实现九宫格

2026-01-30 10:38:32JavaScript

实现九宫格的HTML结构

九宫格的基础结构可以通过HTML的div元素嵌套实现。外层容器定义整体布局，内层9个子元素排列为3x3网格。

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

使用CSS Grid布局

CSS Grid是实现九宫格最简洁的方式。通过display: grid定义网格容器，grid-template-columns设置每列宽度为均分。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 300px;
  margin: 0 auto;
}

.grid-item {
  height: 100px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

动态生成九宫格

通过JavaScript动态创建九宫格元素，适合需要灵活调整的场景。

const container = document.createElement('div');
container.className = 'grid-container';

for (let i = 1; i <= 9; i++) {
  const item = document.createElement('div');
  item.className = 'grid-item';
  item.textContent = i;
  container.appendChild(item);
}

document.body.appendChild(container);

添加交互功能

为九宫格添加点击事件，实现点击高亮效果。

document.querySelectorAll('.grid-item').forEach(item => {
  item.addEventListener('click', function() {
    this.style.backgroundColor = '#a0d8ef';
  });
});

响应式设计

通过媒体查询使九宫格适应不同屏幕尺寸。

@media (max-width: 600px) {
  .grid-container {
    width: 100%;
    grid-template-columns: repeat(3, 33.33%);
  }
  .grid-item {
    height: 80px;
  }
}

进阶样式优化

添加过渡动画和悬停效果提升用户体验。

.grid-item {
  transition: all 0.3s ease;
  cursor: pointer;
}

.grid-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

js实现九宫格