如何为动态CSS Grid中心区域的元素设置红点样式？

思路分析 #

要在随视口变化的网格中心添加红点，核心是精准定位中心单元格及其中间圆点，分三步实现：

1. 计算大网格的中心单元格位置：根据视口变化后的行数、列数，结合容器中心点坐标锁定目标单元格。
2. 定位单元格内的中间圆点：每个单元格包含3个圆点，直接选中索引为1的中间元素。
3. 给目标圆点添加红色样式：通过类名绑定自定义CSS样式。

具体实现步骤 #

1. 计算中心单元格索引 #

在createCircles函数中添加坐标计算逻辑：

• 获取容器中心点坐标：centerX = circles.offsetWidth / 2、centerY = circles.offsetHeight / 2
• 转换为网格的列/行索引：centerCol = Math.floor(centerX / cellWidth)、centerRow = Math.floor(centerY / cellHeight)
• 计算单元格全局索引：centerCellIndex = centerRow * columns + centerCol

2. 绑定红点样式 #

生成网格后，找到中心单元格，选中其中间圆点并添加样式类。

修改后的完整代码 #

JavaScript代码

createCircles();
window.onresize = createCircles;

function createCircles() {
  const columns = 16;
  const cellCircles = 3;

  const circles = document.querySelector('.circles');
  circles.innerHTML = '';
  const cellWidth = circles.offsetWidth / columns;
  const cellHeight = cellWidth / cellCircles;
  const rows = Math.floor(circles.offsetHeight / cellHeight);
  let html = '';
  let cell = '<div class="cell">';
  for (let i = 0; i < cellCircles; i++ ){
    cell += '<i></i>';
  }
  cell += '</div>';
  for (let i = 0; i < columns * rows; i++) {
    html += cell;
  }

  circles.innerHTML = html;

  // 计算中心单元格并添加红点
  if (rows === 0) return;
  const centerX = circles.offsetWidth / 2;
  const centerY = circles.offsetHeight / 2;
  const centerCol = Math.floor(centerX / cellWidth);
  const centerRow = Math.floor(centerY / cellHeight);
  const centerCellIndex = centerRow * columns + centerCol;
  
  const centerCell = circles.children[centerCellIndex];
  if (centerCell) {
    const middleCircle = centerCell.children[1]; // 选中单元格内中间的圆点
    middleCircle.classList.add('red');
  }
}

CSS代码

* {
  box-sizing: border-box;
  margin:  0;
}

body {
  min-height:100vh;
  display:grid;
  grid-template-rows: 1fr;
  padding: 4px;
}

.circles {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  min-height: 0;
  grid-gap: 4px 8px;
}

.cell {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2px;
}

.cell i {
  aspect-ratio: 1;
  border: solid 1px #ccc;
  border-radius: 50%;
}

/* 红点样式 */
.cell i.red {
  background-color: red;
  border-color: red;
}

HTML代码

<div class="circles"></div>

原理说明 #

每次视口变化时，重新计算网格的行数、单元格尺寸，通过容器中心点反向推导对应的单元格位置；利用每个单元格内3个圆点的固定结构，直接选中中间元素添加样式，确保红点始终处于网格视觉中心。

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