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

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>

CodePudding user response：

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>

CodePudding user response：

.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 . .";
}

<html>
    <head>
        <title>Grid Experiment :: Home</title>
        <link rel="stylesheet" href="grid_style.css"/>
    </head>

    <body>
        <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>
    </body>
</html>