Hello world!
So i was messing with the last grid css exercise and wanted to try some things by myself to make sure that i understood the challenge. This challenge tell you to build a grid into another grid, and when you do that you can pass it. What i wanted to do is to go a little bit beyond, and try to make 3 columns inside the 2nd grid with the last one being the “ads” column. Here’s the code:
<style>
.container {
font-size: 1.5em;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;
grid-gap: 10px;
grid-template-areas:
"advert header"
"advert content"
"advert footer";
}
.item1 {
background: LightSkyBlue;
grid-area: header;
}
.item2 {
background: LightSalmon;
grid-area: advert;
}
.item3 {
background: PaleTurquoise;
grid-area: content;
display: grid;
grid-template-columns: 1fr 1fr 60px;
grid-template-areas:
"paragraph1 paragraph2 adv"
}
.item4 {
background: lightpink;
grid-area: footer;
}
.itemOne {
background: PaleGreen;
grid-area: paragraph1;
}
.itemTwo {
background: BlanchedAlmond;
grid-area: paragraph2;
}
.itemthree {
background: red;
grid-area: adv;
}
</style>
<div class="container">
<div class="item1">header</div>
<div class="item2">advert</div>
<div class="item3">
<div class="itemOne">paragraph1</div>
<div class="itemTwo">paragraph2</div>
<div class="itemthree"> ads </div>
</div>
<div class="item4">footer</div>
</div>
As you guys can see, there’s a 3rd column called “ads”. Yey! But this was my second attempt.
The first one instead of the class name “itemthree” i put “advertising2”. For my surprise it didn’t work. So, is there anything wrong with the “advertising2” class name? Why it wont work? Is there any rule for class names that i broke?
Here’s the code of the “broken” code:
<style>
.container {
font-size: 1.5em;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;
grid-gap: 10px;
grid-template-areas:
"advert header"
"advert content"
"advert footer";
}
.item1 {
background: LightSkyBlue;
grid-area: header;
}
.item2 {
background: LightSalmon;
grid-area: advert;
}
.item3 {
background: PaleTurquoise;
grid-area: content;
display: grid;
grid-template-columns: 1fr 1fr 60px;
grid-template-areas:
"paragraph1 paragraph2 adv"
}
.item4 {
background: lightpink;
grid-area: footer;
}
.itemOne {
background: PaleGreen;
grid-area: paragraph1;
}
.itemTwo {
background: BlanchedAlmond;
grid-area: paragraph2;
}
.advertising2 {
background: red;
grid-area: adv;
}
</style>
<div class="container">
<div class="item1">header</div>
<div class="item2">advert</div>
<div class="item3">
<div class="itemOne">paragraph1</div>
<div class="itemTwo">paragraph2</div>
<div class="advertising2"> ads </div>
</div>
<div class="item4">footer</div>
</div>
Thank you very much guys and have a nice day!
