Using CSS Grid to position child divs within parent divs

user_19688883 0
Viewed 66

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 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>

flexbox css-grid css html javascript
2 Answers

With a little modification, I was able to get this: https://jsfiddle.net/c1jx5p6u/1/

It involved moving the logo-container to the root of the grid-container, and setting grid-areas.

This is because with the logos-container div inside the box div, it was positioning in the grid areas as one item. Moving it out of the box div, it can be moved separately into the grid areas created on the grid-container.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "head side"
    "main side"
    "footer footer";
}
.logos-container {
  display: grid;
  align-items: end;
  grid-area: footer;
}
.logos{
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.box{
  grid-area: head;
}
.boxside{
  grid-area: side;
}

<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>
  <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 class="boxside">
    <img src="images/image-hero-desktop.png" alt="image">
  </div>
</div>
user_78404330

Could you pls check your IMG div.

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 class="box">
      <img src="images/image-hero-desktop.png" alt="image">
    </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>
user_112525960
Related