Flutter如何为GridView.count设置分割实现9x9网格视觉分3x3区块

DevOps 小满

2026-9-24

9x9网格视觉分割为3x3区块实现方案

这里以CSS Grid布局为例，不需要修改原有9x9的DOM结构，纯CSS即可实现视觉上的3x3区块分割，完全不影响后端的9x9逻辑绑定：

核心思路

利用CSS的`:nth-child`选择器，给每3列、每3行的末尾格子添加额外的外边距，从而在视觉上分割出独立的3x3区块，原有9x9的格子索引完全不变，后端逻辑不需要做任何调整。

完整代码示例

<!-- 原有9x9网格DOM结构无需修改 -->
<div class="grid-container">
  <!-- 共81个.grid-item，顺序和原有逻辑一致 -->
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  ...
  <div class="grid-item">81</div>
</div>

/* 网格容器基础样式 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  /* 格子之间的基础内间距，可自行调整 */
  gap: 2px;
  width: 450px;
  aspect-ratio: 1 / 1;
}
/* 格子基础样式 */
.grid-item {
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 垂直分割：第3、6列格子添加右侧外边距，形成3x3区块的垂直间隔 */
.grid-item:nth-child(3n) {
  margin-right: 12px;
}
/* 水平分割：第3、6行格子添加底部外边距，形成3x3区块的水平间隔 */
.grid-item:nth-child(n+19):nth-child(-n+27),
.grid-item:nth-child(n+46):nth-child(-n+54) {
  margin-bottom: 12px;
}