Using CSS Grid to position child divs within parent divs-CodePudding

I have a grid container with several other divs inside of it. The heading, paragraph, button and logos are all within their own divs. I've used Flexbox to space the logos out across the entire width of the container. However, I want to position the div with all of the logos in it at the very bottom of the grid container. How can I do this? Here is the markup:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.logos-container {
  display: grid;
  align-items: end;
}

.logos {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<div >
  <div >
    <div >
      <h1>Making remote work</h1>
    </div>
    <div >
      <p>
        Get your team in sync, no matter your location. Streamline processes, create team rituals, and watch productivity soar.
      </p>
    </div>
    <div>
      <button>Learn more</button>
    </div>
    <div >
      <div >
        <img src="images/client-databiz.svg" alt="databiz logo">
        <img src="images/client-audiophile.svg" alt="audiophile logo">
        <img src="images/client-meet.svg" alt="meet logo">
        <img src="images/client-maker.svg" alt="maker logo">
      </div>
    </div>
  </div>

  <div >
    <img src="images/image-hero-desktop.png" alt="image">
  </div>
</div>

CodePudding user response：

With a little modification, I was able to get this:

You can arrange images as per your design.

.logos-container {
  display:flex;
  align-items: end;
}

.logos img{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<div >
      <img src="images/image-hero-desktop.png" alt="image">
    </div>
    <div >
      <div >
        <img src="images/client-databiz.svg" alt="databiz logo">
        <img src="images/client-audiophile.svg" alt="audiophile logo">
        <img src="images/client-meet.svg" alt="meet logo">
        <img src="images/client-maker.svg" alt="maker logo">
      </div>
    </div>