*初学者为什么此网格布局不适用于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？