grid-template-columns不生效：圣诞配对游戏卡片列未显示

我正在制作一个圣诞配对游戏项目，尝试使用grid-template-columns设置卡片列，但除「Time: 100」旁的列外，其余3列均未显示。我已检查拼写等内容仍无效果，请问遗漏了什么？

原始HTML代码 #

<!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>

原始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;
}

核心问题是HTML结构嵌套错误：所有卡片都被包裹在game-info-container内部，而game-container的grid布局仅作用于它的直接子元素——也就是game-info-container这一个元素，卡片根本没参与到grid布局中，自然无法分成4列显示。

修正方案 #

1. 调整HTML结构，让游戏信息容器和卡片成为game-container的同级子元素；
2. 给游戏信息容器添加grid跨列属性，让它占满4列宽度，同时用flex布局实现时间和翻转次数的左右分布。

修改后的HTML代码

<!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>
    <div class="game-container">
        <!-- 游戏信息容器作为grid的直接子元素 -->
        <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>
        </div>
        <!-- 卡片直接作为grid的子元素 -->
        <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>

</body>  

</html>

修改后的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-info-container {
    grid-column: 1 / -1; /* 跨满所有列 */
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}

.game-container {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-gap: 10px;
    justify-content: center; /* 可选：让卡片居中显示 */
}

.card {
    background-color: #d33943;
    height: 175px;
    width: 125px;
}

修改后，game-container的grid布局会直接作用于游戏信息容器和所有卡片，游戏信息容器占满4列，卡片自动填充为4列布局，就能正常显示所有列的卡片了。

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