Html css网格如何使项目变大

如何使标题变大？ Align也不起作用 1fr后不会变大。 我试图增加宽度：100vw，但没有效果。 它似乎“被困”在一个网格项中

CSS

---

你能创建一个最小可复制的例子吗？你能创建一个最小可复制的例子吗？。

* {
  padding: 0;
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
  "hd hd hd hd   hd   hd   hd   hd   hd"
  "sd sd sd main main main main main main"
  "sd sd sd  ft  ft   ft   ft   ft   ft";
    grid-gap: 0em;
    background-color: black;
}

.item:nth-child(1) {
  width: 9fr;
  grid-area: hd;
  background-color: #457b9d;
}
.item:nth-child(2) {
  grid-area: sd;
  background-color: #a8dadc;
}
.item:nth-child(3) {
  grid-area: main;
  background-color: #f1faee;
}
.item:nth-child(4) {
  grid-area: ft;
  background-color: #e63946;
}