Как выровнить в колонку фотки как на макете?

Question

[jjsso]

В общем я что только не пробовал для того чтобы выровнить в колонку фотокарточки как на макете, но все равно ничего не выходит. Я попробовал флекс и вроде по идее должно подойти, потому-что карточки становятся в строку и расположение как на макете, но прописываю flex-direction: column, фотокарточки идут на следующую карточку вообще)

<section class="blog-and-news">
    <div class="container">
    <div class="blog__titles">
      <h1 class="blog__title">From Blog & News</h1>
      <p class="blog__subtitle">Welcome to Community Conversations, a new interview series featuring <br> Intrepid travellers, creatives and activists in our community.</p>
    </div>
    <div class="blog__cards">
      <div class="blog-inner">
      <div class="blog__card">
       <img src="./images/canada-ontario.png" alt="">
      </div>
      <div class="blog__card">
        <img src="./images/hiroshima-japan.png" alt="">
      </div>
      <div class="blog__card">
        <img src="/images/india.png" alt="">
      </div>
      <div class="blog__card">
        <img src="./images/pakistan.png" alt="">
      </div>
      </div>
    </div>
    </div>
  </section>
  
 </main>
</body>
</html>

.blog__subtitle {


font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 160%;
text-align: center;
color: #000000;
opacity: 0.6;

}


.blog__cards {
 
 
 
}

.blog-inner {
 display: flex;
 flex-direction: column;
 

}

Answer 1

[Сергей delphinpro]

.blog-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1rem;
}
.blog__card:first-child {
  grid-row: span 3;
}

Comments

[jjsso]

спасибо, брат! помогло, благодарю за помощь))