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