I am currently working on a grid container that contains multiple divs. Each div houses different elements such as headings, paragraphs, buttons, and logos. I have utilized Flexbox to evenly distribute the logos across the container's width. However, my goal is to position the div containing all logos at the very bottom of the grid container. Is there a way for me to achieve this layout? Below is the code snippet:
.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 class="grid-container">
<div class="box">
<div class="header">
<h1>Making remote work</h1>
</div>
<div class="text">
<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 class="logos-container">
<div class="logos">
<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 class="box">
<img src="images/image-hero-desktop.png" alt="image">
</div>
</div>