CSS grid-template-areas属性布局未按预期生效，如何排查解决？

错误点说明 #

• 错误1：grid-area 属性值多余添加引号
  CSS规范中grid-area指定自定义区域名时，不需要用引号包裹字符串。你代码中.content > .a {grid-area: "a";}这类写法属于无效声明，浏览器无法将元素匹配到grid-template-areas定义的对应区域，导致布局错乱。
• 错误2：grid-template-rows/grid-template-columns 属性值格式错误
  这两个属性不能直接传入纯数字，需要明确指定每一行/列的尺寸，你尝试添加的grid-template-rows: 3; grid-template-columns: 2;属于无效配置，不会生效。

修复后代码 #

CSS 代码 #

.content {
  width: 600px;
  height: 600px;
  border: 4px solid lime;
  display: grid;
  /* 明确指定行高和列宽，3行平分高度，2列平分宽度 */
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    'a d'
    'b d'
    'c d';
}

textarea, iframe {
  margin: 0;
  box-sizing: border-box;
}

/* 去掉grid-area值的引号 */
.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;}

HTML 代码 #

<div class="content">
  <textarea class="a">a</textarea>
  <textarea class="b">b</textarea>
  <textarea class="c">c</textarea>
  <iframe class="d"></iframe>
</div>

修复后即可实现你预期的3行2列布局，左侧依次排列a、b、c三个元素，右侧d元素占满整列高度。

内容的提问来源于stack exchange，提问作者FireFuro99