CSS 中的井字游戏未显示 3x3 网格

Question

我正在开始另一个初学者编码项目：TicTacToe。

我一直在关注 YouTube 上的操作教程，但我的一些结果出现了不同，我无法查明哪里出错了。

问题

单词“Tic Tac Toe 显示在顶部，就像给定的 img 中一样：enter image description here

它应该是什么样子：enter image description here
网格未显示 3x3 网格。

下面是我的代码：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- It's now connected to CSS file-->
<link rel="stylesheet" href="tictactoe.css"
<title>Tic Tac Toe </title>
</head>
<body>
<div class="container"> 
    <h1 class="title">Tic <span>Tac</span> Toe</h1>

    <div class="status-action">
        <div class="status"> x is next </div>
        <div class=" reset"> Reset </div>
    </div>
<!-- put "div.etc-etc" then press "tab" and it'll automatically give you the whole tag-->
    <div class="game-grid"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        
</div>
<!-- It's now connected to JS file-->
<script src="tictactoe.js"></script>
</body>
</html>

CSS

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


body {  
color: #545454;
display: flex; 
font-family: sans-serif;
justify-content: center;
}

.container {
background-color: #14BDAC;
margin: 50px;
padding: 50px;
border-radius: 25px;
width: 500px;
height: 500px;
}

.title {
text-align: center;}
.title span{
color: #F2EBD3;
}


.status-action {
 display: flex; 
margin-top: 25px;
font-size: 25px;
justify-content: space-around; 
}

.reset {
cursor: pointer; 
.reset:hover {
color: #F2EBD3;
}

.game-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 15px; 
}

.game-cell {
height: 200px;
width: 200px;
background: aquamarine;
}

这将是我正在关注的视频以获取更多资源：enter link description here
（希望视频从 16:20 开始到 20:40 左右结束）

同样，如果我发布问题的方式不正确，请编辑并让我知道哪里出了问题，以便下次我可以做得更好。
谢谢！

我不知道为什么在“!DOCTYPE HTML”下显示“Tic Tac Toe Tic Tac Toe”
我也试过弄明白，但是无法找出问题。

Answer 1

由于您没有关闭头部部分的 link 标签，您得到了两次 Tic Tac Toe： <link rel="stylesheet" href="tictactoe.css"></link>

您的网格也能正确显示，因为一些结束标记不在正确的位置。

CSS:

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


body {  
color: #545454;
display: flex; 
font-family: sans-serif;
justify-content: center;
}

.container {
background-color: #14BDAC;
margin: 50px;
padding: 50px;
border-radius: 25px;
width: 500px;
height: 500px;
}

.title {
text-align: center;
}
.title span{
color: #F2EBD3;
}


.status-action {
 display: flex; 
margin-top: 25px;
font-size: 25px;
justify-content: space-around; 
}

.reset {
cursor: pointer; 
}
.reset:hover {
color: #F2EBD3;
}

.game-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 15px; 
}

.game-cell {
height: 200px;
width: 200px;
background: aquamarine;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- It's now connected to CSS file-->
<link rel="stylesheet" href="tictactoe.css"></link>
<title>Tic Tac Toe </title>
</head>
<body>
<div class="container"> 
    <h1 class="title">Tic <span>Tac</span> Toe</h1>

    <div class="status-action">
        <div class="status"> x is next </div>
        <div class=" reset"> Reset </div>
    </div>
<!-- put "div.etc-etc" then press "tab" and it'll automatically give you the whole tag-->
    <div class="game-grid">
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
    </div>
</div>
<!-- It's now connected to JS file-->
<script src="tictactoe.js"></script>
</body>
</html>

CSS 中的井字游戏未显示 3x3 网格

The 3x3 grid is not showing for my tic tac toe in CSS

javascript

html

css

tic-tac-toe