网格问题，它不工作或不显示

Question

所以我一直在尝试设置网格，但问题是它不起作用。我不知道是什么原因造成的。如果有人可以帮忙，谢谢！如果有人也可以解释问题是什么 请注意，我几乎没有使用过 CSS 和 HTML，代码可能看起来不太好。

在检查元素中，显示网格模板区域具有无效的属性值。

.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"
        ;
    }
}

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

正如我所说，我正在尝试将网格设置为

Answer 1

https://www.w3schools.com/css/css_grid.asp

我认为这个链接可以帮助你。