为什么我的网格列不工作？我做这个圣诞匹配游戏项目，我试图使其他卡列使用网格模板列，但其他3列没有显示。他们应该出现在“时间：100“但不是。我已经检查了我的拼写和一切，但没有任何工作。我错过了什么？
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet">
<title>Santa's Matching Game</title>
</head>
<body>
<h1 class="page-title">Santa's Matching Game</h1>
<!-- Game Stuff Besides Cards -->
<div class="game-container">
<div class="game-info-container">
<div class="game-info">
Time: <span id="time-remaining">100</span>
</div>
<div class="game-info">
Flips: <span id="flips">0</span>
</div>
<!-- Cards -->
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
</body>
</html>@font-face {
font-family: "Dancing-Bold";
src: url("Assets/Fonts/Dancing-Bold.ttf") format('truetype');
}
@font-face {
font-family: "MofC-Bold";
src: url("Assets/Fonts/MofC-Bold.ttf") format('truetype');
}
* {
box-sizing: border-box;
}
html {
min-height: 100vh;
}
body {
margin: 0;
background: radial-gradient(#f2f3f8,#58b69b);
}
.page-title {
color:aliceblue;
font-family: MofC-Bold, serif;
font-weight: normal;
text-align: center;
font-size: 6em;
}
.game-info {
color: aliceblue;
font-size: 4em;
font-family: Dancing-Bold, serif;
}
.game-container {
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 10px;
}
.card {
background-color: #d33943;
height: 175px;
width: 125px;
}希望我做得对，我以前从未使用过堆栈溢出。
1条答案
按热度按时间mw3dktmi1#
网格与子元素一起工作，目前你的网格只有一个子元素，那就是game-info-container，删除那个元素，网格就可以工作了