Grid. Как задать определенную высоту конкретному элементу в гриде

Question

Уже 3-4 часа копаюсь и никак не могу разобраться, только недавно начал заниматься frontend-разработкой. Я пытаюсь сделать как по макету, но у меня никак не выходит, из-за высоты изображение элементов которые находятся справа, элементы слева имеют слишком большой отступ друг от друг. как решить данную проблему и сделать в точности как по макету?

как выходит у меня

как должно быть

.post-body-subcat {
  display: grid;
  grid-template-columns: repeat(2, 4fr);
}

<div class="post-body">
  <div class="post-body-cat">
    <div class="cat-container">
      <img width="846" height="692" src="/body/1.jpg" alt="" class="body-cat-img">
      <div class="category-header">
        <p class="category-header-time category-time">Oct 24, 2012 / <button class="time-btn button">Altyn</button></p>
        <h2 class="header-time-title time-title">Home of the big home kit skill of mix ups in tim
        </h2>
      </div>
    </div>
    <div class="cat-container">
      <img width="846" height="841" src="/body/2.jpg" alt="" class="body-cat-img">
      <div class="category-header">
        <p class="category-header-time category-time">Mar 24, 2013 / <button class="time-btn button">Design</button></p>
        <h2 class="header-time-title time-title">try out our best in the spot tops and tricks in
        </h2>
      </div>
    </div>
  </div>
  <div class="post-body-subcat">
    <div class="subcat-container">
      <img width="403" height="235" src="/body/3.jpg" alt="" class="body-cat-img">
      <div class="category-header">
        <p class="category-header-time category-time">Nov 24, 2012 / <button class="time-btn button">Design</button></p>
        <h2 class="subcat-time-titletime-title">Read Always Falls Buttered Side tip
        </h2>
      </div>
    </div>
    <div class="subcat-container">
      <img width="403" height="381" src="/body/4.jpg" alt="" class="body-cat-img">
      <div class="category-header">
        <p class="category-header-time category-time">Dec 24, 2012/ <button class="time-btn button">Altyn</button></p>
        <h2 class="subcat-time-title time-title">The best Blog out there today now
        </h2>
      </div>
    </div>
    <div class="subcat-container">
      <img width="403" height="252" src="/body/5.jpg" alt="" class="body-cat-img">
      <div class="category-header">
        <p class="category-header-time category-time">Jan 24, 2013 / <button class="time-btn button">Altyn</button></p>
        <h2 class="subcat-time-title time-title">Design that makes our product good
        </h2>
      </div>
    </div>
    <div class="subcat-container">
      <img width="403" height="542" src="/body/6.jpg" alt="" class="body-cat-img">
      <div class="category-header">
        <p class="category-header-time category-time">Feb 24, 2013 / <button class="time-btn button">Altyn</button></p>
        <h2 class="subcat-time-title time-title">Forever is longer than today is
        </h2>
      </div>
    </div>
    <div class="subcat-container">
      <img width="403" height="269" src="/body/7.jpg" alt="" class="body-cat-img">
      <div class="category-header">
        <p class="category-header-time category-time">Apr 24, 2013 / <button class="time-btn button">Design</button></p>
        <h2 class="subcat-time-title time-title">Device that takes your product top
        </h2>
      </div>
    </div>
    <div class="subcat-container">
      <img width="403" height="409" src="/body/8.jpg" alt="" class="body-cat-img">
      <div class="category-header">
        <p class="category-header-time category-time">May 24, 2013 / <button class="time-btn button">Altyn</button></p>
        <h2 class="subcat-time-title time-title">The pretty book of the lapua top
        </h2>
      </div>
    </div>
    <div class="subcat-container">
      <img width="403" height="291" src="/body/9.jpg" alt="" class="body-cat-img">
      <div class="category-header">
        <p class="category-header-time category-time">Jun 24, 2013 / <button class="time-btn button">Design</button></p>
        <h2 class="subcat-time-title time-title">The opus of Tim Roth’s somber life
        </h2>
      </div>
    </div>
  </div>
</div>

Answer 1

Как вам уже подсказали в комментарии, воспользуйтесь колонками, поскольку grid для этого не годится. Из представленного фрагмента кода не совсем ясна ваша задача в перспективе, но если речь идёт о том, чтобы сверстать прямо как на картинке, то вот подход:

.post-body-subcat {
  columns: 2;
}
.subcat-container:nth-child(4n) {
  break-after: column;
}

В случае, если вам нужно сделать точь в точь как на представленной картинке, то есть вопросы к порядку элементов.

БЛОГ НА HUSL

Grid. Как задать определенную высоту конкретному элементу в гриде

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