Как позиционировать элементы? (Образец во вложении)

Question

Делаю сетку через grid. Необходимо позиционировать контейнеры, но у меня, почему-то, не удается позиционировать, как нужно. Из-за картинки элементы с текстом увеличиваются в высоту и позиционировать не удается. Необходимо сделать вот так, картинку прилагаю. Помогите пожалуйста..

.why {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  margin-top: 60px;
}
.div1 { grid-area: 1 / 1 / 2 / 2;
border: 1px solid blue; 
font-size: 25px;
font-weight: 900;
width: 150%;
height: 100px;
}

.div2 { grid-area:  2 / 1 / 3 / 2;
border: 1px solid red;
font-size: 23px;
color: #29285d;
width: 150%;
}

.div3 { grid-area: 2 / 2 / 3 / 3;
border: 1px solid violet;
font-size: 23px;
color: #df682d;
width: 150%;
margin-left: 100px;
}

.div4 { grid-area: 2 / 3 / 3 / 4 ;
border: 1px solid rebeccapurple;
margin: 0 auto;
margin-left: 90px;
  width: 400px;
  height:250px;
}

<div class="why">
<div class="div1">11</div>
<div class="div2">22</div>
<div class="div3">33</div>
<img class="div4" src="https://2024god.com/wp-content/uploads/2023/01/kogda-kanikuly-u-studentov-v-2023-2024-godu-4.jpg"></img>
</div>

Answer 1

.why {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 10px;
  width: 100%;
  grid-template-areas:
    "A A A 0 D D"
    "B B C C D D";
}

.div1 {
  grid-area: A;
  border: 1px solid blue;
  font-size: 25px;
  font-weight: 900;
}

.div2 {
  grid-area: B;
  border: 1px solid red;
  font-size: 23px;
  color: #29285d;
}

.div3 {
  grid-area: C;
  border: 1px solid violet;
  font-size: 23px;
  color: #df682d;
}

.div4 {
  grid-area: D;
  border: 1px solid rebeccapurple;
  width: 400px;
  height: 250px;
}

<div class="why">
    <div class="div1">11</div>
    <div class="div2">22</div>
    <div class="div3">33</div>
    <img class="div4" src="https://2024god.com/wp-content/uploads/2023/01/kogda-kanikuly-u-studentov-v-2023-2024-godu-4.jpg"></img>
  </div>

Answer 2

.why {
  display: grid;
  grid-template: "a a a . d" 1fr "b b c c d" 1fr / 1fr 1fr 1fr 1fr 4fr;
  gap: 10px;
}

.div1 {
  grid-area: a;
  border: 1px solid blue;
}

.div2 {
  grid-area: b;
  border: 1px solid red;
}

.div3 {
  grid-area: c;
  border: 1px solid violet;
}

img {
  grid-area: d;
  border: 1px solid rebeccapurple;
  max-width: 100%;
}

<div class="why">
  <div class="div1">11</div>
  <div class="div2">22</div>
  <div class="div3">33</div>
  <img src="https://2024god.com/wp-content/uploads/2023/01/kogda-kanikuly-u-studentov-v-2023-2024-godu-4.jpg"></img>
</div>

БЛОГ НА HUSL

Как позиционировать элементы? (Образец во вложении)

Ответы (2 шт):