HTML Grid Layout not in accordance to CSS - html

Question

So I'm trying to set up a grid-formatted website page with pure HTML and CSS, as you will see in my code below.
I'm trying to alternate between two div tags going down the left hand column of Header & inner-placeholder tags.
You will see the HTML layout alignment with the grid-template-area clearly laid out, along with the number of rows as specified by grid-template-rows
So why do I get just a red box at the corner of the screen when it's fairly obvious what I want to have as per the illustration - except for a curved box followed by a straight box, followed by a curved box etc going down the left hand side?
I have tried to change the fr number to accommodate the number of rows on the left hand side.
Thank you.
Illustration
.grid{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-areas:
"Title Title"
"Header Content"
"inner-placeholder Content"
"Header Content"
"inner-placeholder Content"
"Sidebar Content"
"Footer Footer";
grid-gap: 10px;
}
.Title{
grid-area: Title;
}
.Header{
grid-area: Header;
}
.Sidebar{
grid-area: Sidebar;
}
.Content{
grid-area: Content;
}
.Footer{
grid-area: Footer;
}
.inner-placeholder{
grid-area: inner-placeholder;
}
.grid div:nth-child(even){
background-color: red;
}
.grid div:nth-child(odd){
background-color: green;
}
<div class="grid">
<div class="Title">Title
</div>
<div class="Header">Header
</div>
<div class="inner-placeholder">
</div>
<div class="Header">Header
</div>
<div class="inner-placeholder">
</div>
<div class="Sidebar">Sidebar
</div>
<div class="Content">Content
</div>
<div class="Footer">Footer
</div>
</div>

Answer 1

It seems you misunderstood how grid areas work. If any grid area spans more than 1 row or column, it needs to form a square or a rectangle. Which means they also need to be in one continuous sequence as a 2x2 or 1x3 and so on, in your case you split the Header area and placeholder area between each other, which breaks the grid.
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-template-areas:
"Title Title"
"Header Content"
"inner-placeholder Content"
"Header2 Content"
"inner-placeholder2 Content"
"Sidebar Content"
"Footer Footer";
grid-gap: 10px;
}
.Title {
grid-area: Title;
}
.Header {
grid-area: Header;
}
.Header2 {
grid-area: Header2;
}
.Sidebar {
grid-area: Sidebar;
}
.Content {
grid-area: Content;
}
.Footer {
grid-area: Footer;
}
.inner-placeholder {
grid-area: inner-placeholder;
}
.inner-placeholder2 {
grid-area: inner-placeholder2;
}
.grid div:nth-child(even) {
background-color: red;
}
.grid div:nth-child(odd) {
background-color: green;
}
<div class="grid">
<div class="Title">Title</div>
<div class="Header">Header</div>
<div class="inner-placeholder"></div>
<div class="Header2">Header2</div>
<div class="inner-placeholder2"></div>
<div class="Sidebar">Sidebar</div>
<div class="Content">Content</div>
<div class="Footer">Footer</div>
</div>