Quiero hacer mi sitio web utilizando el sistema de cuadrícula CSS, pero parece que no funciona. Aquí está mi código:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq" "about-us";
}

.logo {
  background-color: blue;
  grid-area: logo;
}

.faq {
  background-color: red;
  grid-area: faq;
}

.aboutUs {
  background-color: cyan;
  grid-area: about-us;
}

<div class="grid">
  <div class="logo">
    LOGO
  </div>
  <div class="faq">
    FAq
  </div>
  <div class="aboutUs">
    About-us
  </div>
</div>