CSS网格模板区域未按预期工作[重复]

Question

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

我希望网格看起来像这样：

a d
b d
c d

但是，如上所示，它最终看起来像这样：

a b
c d
c d
. .

我做错了什么？

添加

grid-template-rows: 3;
grid-template-columns: 2;

也没有帮助。

Answer 1

使用下面的 sn-p 可能会有所帮助。

.content {
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: 
    "a d"
    "b d"
    "c d"
}