css grid-template-areas not working as desired

Question

Hi it seems there's something wrong on my code but i don't realize what could it be. So what i want to acomplish is that format:

IMAGE EMPTY

COMPANY PRODUCT

RESOURCES EXTRAS

Apparently i've made it the correct way i have 3 rows and 2 columns but it appears to be 3 rows and 4 columns, can't realize what could it be!! thanks for help!

The code is made on SCSS so snippet does not work properly here is the codepen:

CodePen

footer {
  width: 100%;
  height: auto;
  ul {
    list-style: none;
    border: 1px solid black;
    background: gray;
    li {
      font-weight: 300;
      color: #5b5e6dcc;
    }
    li:first-child {
      font-weight: bolder;
      color: #565657;
    }
  }
  div:nth-child(1) {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-areas: "img   ." "company product" "resources extras";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 10px;
    justify-content: center;
    background: green;
    img {
      width: 155px;
      height: 155px;
      grid-area: img;
      margin-left: 0.3rem;
    }
    ul:nth-of-type(2) {
      grid-area: company;
    }
    ul:nth-of-type(3) {
      grid-area: product;
    }
    ul:nth-of-type(4) {
      grid-area: resouces;
    }
    ul:nth-of-type(5) {
      grid-area: extras;
    }
  }
}

<nav>
  <img src="./images/slack-logo.png" alt="slack_logo" />
  <ul>
    <li>Why Slack?</li>
    <li>Pricing</li>
    <li>About Us</li>
    <li>Your Workspaces</li>
  </ul>
  <i class="fas fa-bars"></i>

</nav>

<footer>
  <div>
    <img src="https://static.techspot.com/images2/downloads/topdownload/2015/09/slack.png" alt="" />
    <ul>
      <li>COMPANY</li>
      <li>About Us</li>
      <li>Careers</li>
      <li>Blog</li>
      <li>Press</li>
      <li>Brand Guidelines</li>
    </ul>
    <ul>
      <li>PRODUCT</li>
      <li>Why Slack?</li>
      <li>Enterprise</li>
      <li>Customer Stories</li>
      <li>Pricing</li>
      <li>Security</li>
    </ul>
    <ul>
      <li>RESOURCES</li>
      <li>Download</li>
      <li>Help Center</li>
      <li>Guides</li>
      <li>Events</li>
      <li>App Directory</li>
      <li>API</li>
    </ul>
    <ul>
      <li>EXTRAS</li>
      <li>Podcast</li>
      <li>Slack Shop</li>
      <li>Slack at Work</li>
      <li>Slack Fund</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>Status</li>
      <li>Privacy & Terms</li>
      <li>Contact Us</li>
    </ul>
    <div>
      <img src="./images/us-flag.png" alt="" />
      <span>English (US)</span>
      <i class="fas fa-chevron-down"></i>
      <i class="fab fa-twitter"></i>
      <i class="fab fa-facebook-f"></i>
      <i class="fab fa-youtube"></i>
    </div>
  </div>
</footer>

Answer 1

Reproducing your code...translating SCSS to CSS, I get this:

As you can see, you do have 3 columns and 4 rows indeed:

The problem is this:

footer div:nth-child(1) ul:nth-of-type(3) {
    grid-area: resouces;
}

Fix the typo (grid-area: resources;) and you get it working: