css grid webpage - shows flat grid instead of the intended square

Question

I recently started learning html and CSS. I made a very simple CSS grid layout, but it produces a horizontal bar instead of the intended square layout. What am I doing wrong?

.header {
  grid-area: "h";
}

.sideMenu {
  grid-area: "s";
}

.content {
  grid-area: "c";
}

.footer {
  grid-area: "f";
}

.grid-body {
  display: grid;
  grid-template-areas: 
        ". h h h ."
        "s . . . ."
        "s . c c ."
        ". . c c ."
        ". f f . .";
}

<div class="grid-body">
  <div class="header">Header</div>
  <div class="sideMenu">Side Menu</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

Answer 1

As has been pointed out in a comment, the value of grid-area should not be in quotes.

A good tip is to use your browser's dev tools inspect facility and look at the CSS attached to each element. In your case with your snippet I saw a a yellow warning triangle next to grid-area which when hovered on warned me that the property value was invalid.

.header {
  grid-area: h;
}

.sideMenu {
  grid-area: s;
}

.content {
  grid-area: c;
}

.footer {
  grid-area: f;
}

.grid-body {
  display: grid;
  grid-template-areas: 
        ". h h h ."
        "s . . . ."
        "s . c c ."
        ". . c c ."
        ". f f . .";
}

<div class="grid-body">
  <div class="header">Header</div>
  <div class="sideMenu">Side Menu</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>