.content {
width: 600px;
height: 600px;
border: 4px solid lime;
display: grid;
grid-template-areas:
'a d'
'b d'
'c d';
}
textarea, iframe {
margin: 0;
box-sizing: border-box;
}
.content > .a {grid-area: "a";}
.content > .b {grid-area: "b";}
.content > .c {grid-area: "c";}
.content > .d {grid-area: "d"; height: 100% !important; width: 100% !important;}<div class="content">
<textarea class="a">a</textarea>
<textarea class="b">b</textarea>
<textarea class="c">c</textarea>
<iframe class="d"></iframe>
</div>I was hoping the grid layout would appear as:
a d
b d
c d
However, it seems to be displaying as:
a b
c d
c d
. .
What could be causing this issue?
I attempted to fix it by including
grid-template-rows: 3;
grid-template-columns: 2;
but that did not solve the problem.