*初学者 为什么此网格布局不适用于 html？我想不通

Question

我今天学习了网格布局的基础知识并得到了一个工作，但我不明白为什么这不起作用。

目前我不明白为什么。任何帮助都感激不尽。 这是我的 HTML 代码：

  <div id="PromiseImpactArea">
<span id="promiseTitle">Our Promise:</span>
<div id="promiseArea">{{currentCharity.promise}}</div>

 #promiseImpactArea{
  display:grid;
  grid-template-rows: [row1-start] 40px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-items: center;
  grid-template-areas:
    "promiseTitle promiseTitle promiseArea promiseArea";
}

#promiseTitle {
  border: solid 2px red;
  grid-area: promiseTitle;
  justify-self: center;
  align-self: center;
  font-size: 20px;
  font-weight: bold;
}

#promiseArea {
  grid-area: promiseArea;
  background-color: white;
  border: 2px solid tomato;
}

Answer 1

这不是在第一行 css 上使用大写字母 P 吗？