英文:
grid-template-column not showing up
问题
Sure, here's the translated portion of your text:
为什么我的网格列不起作用？我正在制作这个圣诞匹配游戏项目，我正在尝试使用网格模板列来制作其他卡片列，但其他的3列没有显示出来。它们应该显示在“Time: 100”的旁边，但却没有显示出来。我已经检查了拼写和一切，但什么都不起作用。我漏掉了什么？
英文:
Why isn't my grid column working? I'm making this Christmas matching game project and I am trying to make the other card columns using grid template columns but the other 3 columns aren't showing up. They should show up right next to "Time: 100" but aren't. I've checked my spelling and everything yet nothing is working. What am I missing?
<!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;
}
Hopefully I did this right, I've never used Stack overflow before.
答案1
得分: 1
Grid与子元素配合使用，目前您的网格只有一个子元素game-info-container，请移除该元素，网格将正常工作。
<h1 class="page-title">Santa's Matching Game</h1>
<!-- 游戏信息除了卡片之外的内容 -->
<div class="game-container">
<div class="game-info">
时间: <span id="time-remaining">100</span>
</div>
<div class="game-info">
翻牌数: <span id="flips">0</span>
</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 class="card"></div>
</div>
上述代码是要移除的game-info-container元素之后的网格和相关内容。
英文:
Grid works with child elements, currently your gird only has one child wich is game-info-container, remove that element and the grid will work
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@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;
}
<!-- language: lang-html -->
<h1 class="page-title">Santa's Matching Game</h1>
<!-- Game Stuff Besides Cards -->
<div class="game-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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论