CSS Grid布局失效求助：grid-template-areas提示无效属性值

我是HTML和CSS新手，尝试设置Grid布局但无法正常工作，完全不清楚问题原因，恳请大家帮忙排查并解释问题所在。注意：我的代码可能不够规范，因为我几乎没使用过CSS和HTML。

通过浏览器开发者工具检查发现，grid-template-areas属性值无效。

我的代码 #

CSS代码 #

.container{
    display: grid; 
}

.blank{grid-area: blank;}
.yellow{background-color: yellow; grid-area: yellow;}
.brown{background-color: brown; grid-area: brown;}
.lime{background-color: limegreen; grid-area: lime;}
.seablue{background-color: #4472C4; grid-area: seablue;}
.grayblue{background-color: #AEAAAA; grid-area: grayblue;}
.sand{background-color: #FFD966; grid-area: sand;}
.green{background-color: green; grid-area: green;}
.pink{background-color: pink; grid-area: pink;}
.purple{background-color: purple; grid-area: purple;}
.blue{background-color: cornflowerblue; grid-area: blue;}
.black{background-color: black; grid-area: black;}
.brightgreen{background-color: #A9D08E; grid-area: brightgreen;}
.red{background-color: red; grid-area: red;}
.brightbrown{background-color: #C65911; grid-area: brightbrown;}


@media (min-width: 1000px){
    .container{
        grid-template-columns: auto repeat(7, 1fr);
        grid-template-rows: auto repeat(9, 1fr);
        grid-template-areas: "green yellow seablue seablue seablue brightgreen brightgreen"
                             "green yellow grayblue grayblue grayblue brightgreen brightgreen"
                             "brown yellow sand sand sand blank brightbrown"
                             "brown yellow sand sand sand blank brightbrown"
                             "brown yellow green pink purple red brightbrown"
                             "brown yellow green pink purple red brightbrown"
                             "brown yellow green blue blue red brightbrown"
                             "brown yellow green blue blue red brightbrown"
                             "blank yellow black black black black black";
    }  
}

@media (min-width:600px) and (max-width:1000px){
    .container{
        grid-template-columns: auto repeat(5, 1fr) ;
        grid-template-rows: auto repeat(8, 1fr);
        grid-template-areas: "brown brown brown brown brown"
        "pink pink lime red black"
        "pink pink lime red black"
        "blank blue blue red black"
        "blank blue blue red black"
        "yellow yellow yellow yellow black"
        "green green green blank black"
        "green green green blank black";
    }
}

@media (max-width:600px){
    .container{
        grid-template-columns: auto repeat(2, 1fr);
        grid-template-rows: auto repeat(9, 1fr);
        grid-template-areas: "pink pink"
        "blank red"
        "blue red"
        "blue blank"
        "blue blank"
        "black black"
        "yellow yellow"
        "brown green"
        "brown lime"
        ;
    }
}

HTML代码 #

<div class="container">
    <div class="blank">1</div>
    <div class="yellow">2</div>
    <div class="brown">3</div>
    <div class="lime">4</div>
    <div class="seablue">5</div>
    <div class="grayblue">6</div>
    <div class="sand">7</div>
    <div class="green">8</div>
    <div class="pink">9</div>
    <div class="purple">10</div>
    <div class="blue">11</div>
    <div class="black">12</div>
    <div class="brightgreen">13</div>
    <div class="red">14</div>
    <div class="brightbrown">15</div>
</div>

预期布局效果 #

实现多响应式网格布局：大屏（≥1000px）为9行7列的区块排列，中屏（600px-1000px）为8行5列，小屏（≤600px）为9行2列，各区块按指定区域分布。

问题排查与修复 #

核心问题1：列数与grid-template-areas行数命名数量不匹配 #

grid-template-areas中每一行的命名数量必须和grid-template-columns定义的列数完全一致，否则该属性直接失效：

• 大屏：grid-template-columns设置为auto repeat(7, 1fr)，总共8列，但grid-template-areas每行只有7个命名，数量不匹配；
• 中屏：grid-template-columns设置为auto repeat(5, 1fr)，总共6列，但grid-template-areas每行只有5个命名；
• 小屏：grid-template-columns设置为auto repeat(2, 1fr)，总共3列，但grid-template-areas每行只有2个命名。

核心问题2：可选优化 - 代码格式不统一 #

grid-template-areas的各行字符串未对齐，容易导致列数计数错误，不利于后续维护。

修复方案 #

1. 调整grid-template-columns的列数，使其与grid-template-areas每行命名数量一致：

   • 大屏：将grid-template-columns: auto repeat(7, 1fr);改为grid-template-columns: repeat(7, 1fr);（去掉auto，变成7列，与每行7个命名匹配）；
   • 中屏：将grid-template-columns: auto repeat(5, 1fr);改为grid-template-columns: repeat(5, 1fr);；
   • 小屏：将grid-template-columns: auto repeat(2, 1fr);改为grid-template-columns: repeat(2, 1fr);。

2. 统一grid-template-areas的字符串格式，对齐每行命名，方便检查列数。

修复后示例（大屏部分） #

@media (min-width: 1000px){
    .container{
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(9, 1fr);
        grid-template-areas: 
            "green yellow seablue seablue seablue brightgreen brightgreen"
            "green yellow grayblue grayblue grayblue brightgreen brightgreen"
            "brown yellow sand sand sand blank brightbrown"
            "brown yellow sand sand sand blank brightbrown"
            "brown yellow green pink purple red brightbrown"
            "brown yellow green pink purple red brightbrown"
            "brown yellow green blue blue red brightbrown"
            "brown yellow green blue blue red brightbrown"
            "blank yellow black black black black black";
    }  
}

额外建议 #

• 给.container设置min-height: 100vh;，避免因内容高度不足导致网格显示异常；
• 给深色背景的网格项添加color: white;，提升文本可读性；
• 给网格项添加padding: 1rem;，优化内容显示效果。

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