Image pushing divs below-CodePudding

I have a 2 column layout with an image to the left and wanted to have 3 divs on the right but can only manage to get 1 div to align next to the image and the other 3 divs are below the image. How can I have all 3 divs next to the image?

I know this is easy with grid-areas but wanted to do it with out.

CSS

.wrapper {
  background-color: pink;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto 1fr;
}

.hero {
  background-color: red;
}

.foo {
  background-color: orange;
}

.bar {
  background-color: lime;
}

.baz {
  background-color: aqua;
}

img {
  width: 100%;
  display: block;
}

HTML

<div >
  <div >
    <img src="https://via.placeholder.com/1080x1080" alt="">
  </div>
  <div >
    foo
  </div>
  <div >
    bar
  </div>
  <div >
    baz
  </div>
</div>

https://codepen.io/emmabbb/pen/oNqPwad

CodePudding user response：

Set a specific grid row value on your hero: grid-row: 1 / 4;

Like this:

.wrapper {
  background-color: pink;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto 1fr;
}

.hero {
  background-color: red;
  grid-row: 1 / 4;
}

.foo {
  background-color: orange;
}

.bar {
  background-color: lime;
}

.baz {
  background-color: aqua;
}

img {
  width: 100%;
  display: block;
}

<div >
  <div >
    <img src="https://via.placeholder.com/1080x1080" alt="">
  </div>
  <div >
    foo
  </div>
  <div >
    bar
  </div>
  <div >
    baz
  </div>
</div>

If you want your divs with text in them to be of equal height change the grid template rows to grid-template-rows: 1fr 1fr 1fr; Like this:

.wrapper {
  background-color: pink;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr 1fr 1fr;
}

.hero {
  background-color: red;
  grid-row: 1 / 4;
}

.foo {
  background-color: orange;
}

.bar {
  background-color: lime;
}

.baz {
  background-color: aqua;
}

img {
  width: 100%;
  display: block;
}

<div >
  <div >
    <img src="https://via.placeholder.com/1080x1080" alt="">
  </div>
  <div >
    foo
  </div>
  <div >
    bar
  </div>
  <div >
    baz
  </div>
</div>

CodePudding user response：

I believe the easiest way to get the 3 divs on the right of the image without using grid area would be to wrap foo, bar, and baz in a parent div and use 1 row on your grid; you may have to mess with the hight of the divs on the right though.

<div >
  <div >
    <img src="https://via.placeholder.com/1080x1080" alt="">
  </div>
  <div>
    <div >
      foo
    </div>
    <div >
      bar
    </div>
    <div >
      baz
    </div>
  </div>
</div>

I hope that does what your looking for!