如何在容器内实现响应式井字棋的横竖分隔线

嘿，这个问题我之前帮人解决过好几次！你原来的嵌套div结构确实不太适合做自适应的井字棋线条——因为嵌套元素的尺寸是基于父元素的，而不是最外层的正方形容器，自然没法跟着容器缩放保持等距。给你两个最实用的纯CSS方案，轻松实现需求：

方案1：CSS Grid + 背景渐变（最简洁，无额外DOM） #

这个方案完全不需要额外的线条div，靠Grid布局和背景渐变直接画出自适应的井字线，代码量最少，维护起来也方便：

<div class="container">
  <!-- 这里可以放9个格子，用来放棋子 -->
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

.container {
  /* 自适应大小：最大400px，小屏幕下占视口90%的最小边（保证正方形） */
  width: min(90vmin, 400px);
  /* 强制保持正方形比例 */
  aspect-ratio: 1/1;
  /* 3x3网格布局 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  /* 用渐变画竖线和横线 */
  background-image: 
    linear-gradient(to right, #000 1px, transparent 1px),
    linear-gradient(to bottom, #000 1px, transparent 1px);
  /* 渐变大小对应网格的1/3，刚好在中间位置 */
  background-size: 33.333% 100%, 100% 33.333%;
  background-position: center;
}

.cell {
  /* 格子可选样式，比如加内边距方便点击 */
  padding: 1rem;
  /* 去掉默认边距 */
  margin: 0;
  box-sizing: border-box;
}

为什么这个方案好用？ #

• Grid天生就是为网格布局设计的，repeat(3,1fr)自动把容器分成3等份，不管容器多大，比例始终保持1:1:1
• 背景渐变的background-size用百分比设置，会跟着容器尺寸自动缩放，完美保证线条等距
• 不需要额外的线条元素，DOM结构干净

方案2：绝对定位线条 + CSS百分比（结构清晰，易调整） #

如果你更倾向于用独立的元素来控制线条（比如要给线条加动画、改样式），可以用绝对定位配合百分比定位，同样能实现自适应：

<div class="container">
  <!-- 竖线 -->
  <div class="line vertical"></div>
  <div class="line vertical"></div>
  <!-- 横线 -->
  <div class="line horizontal"></div>
  <div class="line horizontal"></div>
  <!-- 可选：棋子格子容器 -->
  <div class="cells-grid">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

.container {
  position: relative;
  width: min(90vmin, 400px);
  aspect-ratio: 1/1;
}

/* 基础线条样式 */
.line {
  background-color: #000;
  position: absolute;
}

/* 竖线：高度100%，宽度1px，分别定位在1/3和2/3处 */
.vertical {
  width: 1px;
  height: 100%;
  left: 33.333%;
}
.vertical:nth-child(2) {
  left: 66.666%;
}

/* 横线：宽度100%，高度1px，分别定位在1/3和2/3处 */
.horizontal {
  height: 1px;
  width: 100%;
  top: 33.333%;
}
.horizontal:nth-child(4) {
  top: 66.666%;
}

/* 可选的格子网格，用来放棋子 */
.cells-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.cell {
  padding: 1rem;
  box-sizing: border-box;
}

这个方案的优势： #

• 线条是独立的DOM元素，便于单独设置样式（比如加粗、变颜色、加hover效果）
• 百分比定位直接基于最外层容器，缩放时自动保持等距，不会受嵌套结构影响

总结 #

原来的嵌套div结构之所以失效，是因为嵌套元素的尺寸是相对于直接父元素的，而不是最外层的正方形容器，导致无法统一控制位置。上面两个方案都绕过了这个问题，要么用Grid的天然比例特性，要么用绝对定位直接关联最外层容器，都能完美实现线条随容器缩放保持等距的需求~

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