*初学者为什么这个网格布局不适用于html？我搞不懂

今天我学习了网格布局的基础知识，并让它发挥作用，但我不明白为什么它不起作用

目前我不明白为什么。任何帮助都将不胜感激。 以下是我的HTML代码：

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

---

第一行css上的大写字母p不起作用吗？

LOL，你明白了！！非常感谢。。。。我不敢相信这是因为大写错误。再次感谢！！！你想让这个看起来怎么样？你能描述一下吗？嗨，安迪，我试着把一个div和旋转木马放在同一行，但是b.c旋转木马不起作用，我试着用这个简单的例子。我不明白为什么像在一列中有两个div这样简单的东西不起作用@Grms谢天谢地指出这是资本化错误，现在正在处理旋转木马

 #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;
}