当前位置：首页 > JavaScript

js实现九宫格

2026-04-04 02:15:14JavaScript

使用CSS Grid实现九宫格

CSS Grid布局是创建九宫格的最简单方法之一。通过设置网格容器为3行3列，可以快速实现九宫格效果。

<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>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
}

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

使用Flexbox实现九宫格

Flexbox也可以实现九宫格布局，通过设置flex容器的换行属性，并控制子元素的宽度。

js实现九宫格

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

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 320px;
  gap: 10px;
}

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

使用JavaScript动态生成九宫格

通过JavaScript可以动态创建九宫格元素，并添加交互功能。

js实现九宫格

<div id="sudoku-container"></div>

const container = document.getElementById('sudoku-container');
container.style.display = 'grid';
container.style.gridTemplateColumns = 'repeat(3, 100px)';
container.style.gridTemplateRows = 'repeat(3, 100px)';
container.style.gap = '10px';

for (let i = 1; i <= 9; i++) {
  const cell = document.createElement('div');
  cell.textContent = i;
  cell.style.backgroundColor = '#f0f0f0';
  cell.style.display = 'flex';
  cell.style.alignItems = 'center';
  cell.style.justifyContent = 'center';
  cell.style.fontSize = '24px';
  cell.addEventListener('click', () => {
    cell.style.backgroundColor = '#ccc';
  });
  container.appendChild(cell);
}

添加九宫格动画效果

通过CSS动画可以为九宫格添加交互效果，提升用户体验。

.grid-item {
  transition: transform 0.3s, background-color 0.3s;
}

.grid-item:hover {
  transform: scale(1.05);
  background-color: #ddd;
}

响应式九宫格设计

使用相对单位可以让九宫格适应不同屏幕尺寸。

.grid-container {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  aspect-ratio: 1/1;
  max-width: 300px;
  margin: 0 auto;
}

以上方法提供了多种实现九宫格的方案，可以根据具体需求选择合适的实现方式。CSS Grid方法最为简洁，Flexbox兼容性更好，JavaScript方法则提供了最大的灵活性。