如何使用CSS Grid绘制符合要求的井字棋（Tic Tac Toe）棋盘？

我正在开发井字棋（Tic Tac Toe）游戏，想要绘制一个终极井字棋样式的网格（3×3大网格中每个单元格内包含一个3×3小网格），但不知道该如何实现。现有代码如下：

现有CSS代码 #

.grid-holder {
    display: flex;
    justify-content: center;
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    column-gap: 5px;
    row-gap: 5px;
}

.grid {
    border: 2px solid red;
    text-align: center;
    padding: 20px;
    cursor: pointer;
}

现有HTML代码 #

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

解决方案：嵌套CSS Grid实现层级网格 #

要实现终极井字棋的嵌套网格，需要在外层3×3网格的每个单元格内，再创建一个小的3×3网格。以下是修改后的完整代码：

修改后的CSS

/* 大网格容器 */
.big-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px; /* 大网格之间的间距，区分外层格子 */
    padding: 10px;
    border: 3px solid #333;
    width: fit-content;
    margin: 0 auto;
}

/* 大网格的每个单元格 */
.big-grid {
    display: grid;
    grid-template-columns: repeat(3, 60px);
    grid-template-rows: repeat(3, 60px);
    gap: 2px; /* 小网格之间的间距 */
    border: 2px solid #333;
    padding: 5px;
}

/* 小网格的每个单元格 */
.small-grid {
    border: 1px solid #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.small-grid:hover {
    background-color: #f0f0f0;
}

修改后的HTML

<div class="big-grid-container">
    <!-- 第一行大网格 -->
    <div class="big-grid">
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
    </div>
    <div class="big-grid">
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
    </div>
    <div class="big-grid">
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
    </div>
    <!-- 第二行大网格 -->
    <div class="big-grid">
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
    </div>
    <div class="big-grid">
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
    </div>
    <div class="big-grid">
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
    </div>
    <!-- 第三行大网格 -->
    <div class="big-grid">
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
    </div>
    <div class="big-grid">
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
    </div>
    <div class="big-grid">
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
        <div class="small-grid"></div>
    </div>
</div>

关键说明 #

• 使用嵌套Grid布局：外层.big-grid-container控制大的3×3网格，每个.big-grid内部再实现小的3×3网格
• 通过不同粗细的边框和间距区分层级：大网格用粗边框、大间距，小网格用细边框、小间距
• 使用repeat(3, 1fr)和repeat(3, 60px)简化Grid行列定义，让代码更简洁
• 添加hover效果提升交互体验

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