[SOLVED] Css grid not working, can't figure out why

Css grid not working, can't figure out why

I'm trying to build a simple grid layout aa/bc/dd and can't figure out what's wrong, kinda running out of ideas...

.container {
  display: grid;
  grid-template-areas: 'head head' 'nav main' 'foot foot';
  gap: 10px;
}

.content {
  background-color: red;
}

.1 {
  grid-area: head;
}

.2 {
  grid-area: nav;
}

.3 {
  grid-area: main;
}

.4 {
  grid-area: foot;
}

<main>
  <div class="container">
    <div class="content 1">header</div>
    <div class="content 2">nav</div>
    <div class="content 3">aside</div>
    <div class="content 4">footer</div>
  </div>
</main>

All it does is place my elements in an head nav/main foot 2:2 grid, for some reason head never extends to fill out the first row.

In the end I just got code from a different source and adapted it, but I want to learn from what I did wrong in my own code.

Solution

You made a big mistake. Class names in CSS cannot be numbers. You must use string for class name.

I provde updated code.

<html>
  <head>
    <style>
      .container {
        display: grid;
        grid-template-areas:
          'head head'
          'nav main'
          'foot foot';
        gap: 10px;
      }

      .content {
        background-color: red;
        padding: 10px;
      }

      .header {
        grid-area: head;
      }

      .nav {
        grid-area: nav;
      }

      .main {
        grid-area: main;
      }

      .footer {
        grid-area: foot;
      }
    </style>
  </head>

  <body>
    <main>
      <div class="container">
        <div class="content header">header</div>
        <div class="content nav">nav</div>
        <div class="content main">aside</div>
        <div class="content footer">footer</div>
      </div>
    </main>
  </body>
</html>