Question 274420 in Html Question posted in
Some basic documentation can be found here.

Html – The Grid Problem, It isn't working or showing up

So I have been trying setting grid but problem is that its not working. I have no clue what causes it. If anyone could help, thanks! If anoyone could also explain what is the problem
Please note, that I have barely used CSS and HTML and code might not look very good.

In the inspect element, it shows that the grid template area has invalid property value.

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

As I said, I’m trying to set the grid to look
How the website should look like.

Tags:

2

Answers


  2. 0

    I can’t imagine a complex layout like that is the best solution, but first of all, you need to format the code so it’s actually readable.

    @Paulie_D pointed out that green was used two times on min-width: 1000px, and I think you meant to have lime on the two top left areas.

    You can’t have the same area in different places, so the .blank area won’t work. However, you can use . to say an area is blank.

    .container{
    display: grid; 
}

.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:
          "lime   yellow seablue  seablue   seablue   brightgreen brightgreen"
          "lime   yellow grayblue grayblue  grayblue  brightgreen brightgreen"
          "brown  yellow sand     sand      sand      .           brightbrown"
          "brown  yellow sand     sand      sand      .           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"
          ".      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"
          ".      blue    blue    red     black"
          ".      blue    blue    red     black"
          "yellow yellow  yellow  yellow  black"
          "green  green   green   .       black"
          "green  green   green   .       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"
          ".      red"
          "blue   red"
          "blue   ."
          "blue   ."
          "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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search