Делаем области сетки одинаковой высоты

Question

У меня есть небольшая проблема, я знаю, как перекрывать элементы в сетке CSS, но я не знаю, как сделать так, чтобы они имели одинаковую высоту (без перекрытия я могу), а я не вижу.

Вот что я сделал до сих пор, также пытался с помощью transformY(-xxxx%) перекрывать его, но я не думаю, что это правильный способ делать то, что я хочу, поэтому я сделал это с помощью сетки CSS, и теперь я Я просто застрял, чтобы сделать их одинаковой высоты, вот что я сделал до сих пор:

.posts_container {
    word-break: break-word;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 60px;
}

.post_container {
    display: grid;
}

.post_container > a {
    grid-row: 1 / span 8;
    grid-column: 1 / span 2;
}

.post_container_content {
    box-sizing: border-box;
    background-color: #FFF;
    box-shadow: 1px 1px 23px rgba(0,0,0,0.1);
    padding: 30px 25px;
    max-width: 90%;
    margin: 0 auto;
    grid-row: 7 / span 7;
    grid-column: 1 / span 2;
}

.post_date {
    color: #b1b1b1;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 3.5px;
}

.post_title {
    color: #000;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .6px;
    margin-top: 10px;
}

.post_title:after {
    content: '';
    display: block;
    background-color: red;
    width: 31px;
    height: 4px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: -10px;
}

<div class="posts_container">

  <div class="post_container">
    <a href="#">
      <img src="http://placehold.it/366x255">
    </a>
    <div class="post_container_content">
      <div class="post_date">03.09.2018</div>
      <div class="post_title">Lorem ipsum dolor sit amet,                 consetetur sadipscing elitr ipsum dolor sit ?</div>
      <div class="post_content">dsf,dsklf,ds,fkdsf,ds,fds,kf,dkos,fdsfk,kf,kds,fk,dskf,kdsf dsf,dsklf,ds,fkdsf,ds,fds,kf,dkos,fdsfk,kf,kds,fk,dskf,kdsf dsf,dsklf,ds,fkdsf,ds,fds,kf,dkos,fdsfk,kf,kds,fk,dskf,kdsf dsf,dsklf,ds,fk [...]</div>
      <div class="post_footer">
        <a href="#">Read more</a>
      </div>
    </div>
  </div>
  
  <div class="post_container">
    <a href="#">
      <img src="http://placehold.it/366x255">
    </a>
    <div class="post_container_content">
      <div class="post_date">03.09.2018</div>
      <div class="post_title">Lorem ipsum dolor sit amet,                 consetetur sadipscing elitr ipsum dolor sit ?</div>
      <div class="post_content">et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolo Stet clita kasd gubergr, kimata sanctus est Lorem ipsum [...]</div>
      <div class="post_footer">
        <a href="#">Read more</a>
      </div>
    </div>
  </div>
  
    <div class="post_container">
    <a href="#">
      <img src="http://placehold.it/366x255">
    </a>
    <div class="post_container_content">
      <div class="post_date">03.09.2018</div>
      <div class="post_title">Lorem ipsum dolor sit amet ?</div>
      <div class="post_content">Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolo Stet clita kasd gubergr, kimata sanctus est Lorem ipsum [...]</div>
      <div class="post_footer">
        <a href="#">Read more</a>
      </div>
    </div>
  </div>
  
    <div class="post_container">
    <a href="#">
      <img src="http://placehold.it/366x255">
    </a>
    <div class="post_container_content">
      <div class="post_date">03.09.2018</div>
      <div class="post_title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
      <div class="post_content">Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolo Stet clita kasd gubergr, kimata sanctus est Lorem ipsum [...]</div>
      <div class="post_footer">
        <a href="#">Read more</a>
      </div>
    </div>
  </div>
  
</div>

(вам нужно увеличить размер экрана, чтобы получать сообщения в 2 ряда, например:

Спасибо тебе

Answer 1

Ваш .post_container является контейнером сетки. Вы настроили это так:

.post_container {
    display: grid;
}

Поскольку вы не определили строки или столбцы, все строки или столбцы, созданные для размещения элементов сетки, будут implicit.

Функция определения размера строки для неявных строк управляется свойством grid-auto-rows. Это значение по умолчанию auto (на основе контента). Вот почему вы видите разную высоту: длина содержимого в каждом блоке разная.

Решение состоит в том, чтобы переопределить значение по умолчанию с помощью 1fr, который затем равномерно распределяет пространство контейнера между неявными строками, создавая области сетки равной высоты.

.post_container {
    display: grid;
    grid-auto-rows: 1fr; /* new */
}