Trying grid in grid but I am confused how to get it next to eachother

Question

I tried to put the "class additional div" somewhere between the "class div container8" but nothing worked it just stayed under the container.

I got it to work next to each other in the additional div itself, but now I need to make the additional div next to the div with the logo.

I also tried to put grid-auto-flow in the container8 or in the footer in CSS, but I got no results. So I'm definitely doing something wrong I just can't figure out what it is.

footer {
  grid-template-columns: 1fr 1fr;
  min-height: 150px;
  background: var(--Neutral-Black, #263238);
}

.container8 {
  display: grid;
  padding: 64px 165px;
}

.additional {
  display: grid;
  grid-auto-flow: column;
}

.container8 p {
  color: var(--Neutral-Silver, #F5F7FA);
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.additional p {
  color: var(--Neutral-Silver, #F5F7FA);
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.additional h2 {
  color: var(--Neutral-White, #FFF);
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
}

<footer>
  <div class="container8">
    <img src="images/Logo_nexx.png">
    <p>Copyright © 2020 Nexcent ltd.</p>
    <p>All rights reserved</p>
    <div>
      <img src="images/insta.svg">
      <img src="images/basket.svg">
      <img src="images/twitter.svg">
      <img src="images/yt.svg">
    </div>
  </div>

  <div>
    <div class="additional">
      <div>
        <h2>Company</h2>
        <p>About us</p>
        <p>Blog</p>
        <p>Contact us</p>
        <p>Pricing</p>
        <p>Testimonials</p>
      </div>
      <div>
        <h2>Support</h2>
        <p>Help center</p>
        <p>Terms of service</p>
        <p>Legal</p>
        <p>Privacy policy</p>
        <p>Status</p>
      </div>
      <h2>Stay up to date</h2>
    </div>
  </div>
</footer>

Answer 1

The code you have is all good, you have added your template columns inside the footer and if you want container8 and additional to show side by side each other you are supposed to set the display of the parent to be grid, not the children inside it

This is the stuff you need to edit

footer {
  /* Add display grid in the footer */
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 150px;
  background: var(--Neutral-Black, #263238);
}

.container8 {
  /* You can remove the display block too, as by defualt it has display block, setting it to grid isn't needed */
  display: block;
  padding: 64px 165px;
}

/* .additional will work just fine but using a flexbox like this might be much easier for some */
.additional {
  display: flex;
  justify-content: space-around
}

And this is the final result of the changes

footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 150px;
  background: var(--Neutral-Black, #263238);
}

.container8 {
  display: block;
  padding: 64px 165px;
}

.additional {
  display: flex;
  justify-content: space-around;
}

.container8 p {
  color: var(--Neutral-Silver, #f5f7fa);
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.additional p {
  color: var(--Neutral-Silver, #f5f7fa);
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.additional h2 {
  color: var(--Neutral-White, #fff);
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
}

<footer>
  <div class="container8">
    <img src="images/Logo_nexx.png">
    <p>Copyright © 2020 Nexcent ltd.</p>
    <p>All rights reserved</p>
    <div>
      <img src="images/insta.svg">
      <img src="images/basket.svg">
      <img src="images/twitter.svg">
      <img src="images/yt.svg">
    </div>
  </div>

  <div>
    <div class="additional">
      <div>
        <h2>Company</h2>
        <p>About us</p>
        <p>Blog</p>
        <p>Contact us</p>
        <p>Pricing</p>
        <p>Testimonials</p>
      </div>
      <div>
        <h2>Support</h2>
        <p>Help center</p>
        <p>Terms of service</p>
        <p>Legal</p>
        <p>Privacy policy</p>
        <p>Status</p>
      </div>
      <h2>Stay up to date</h2>
    </div>
  </div>
</footer>