使网格区域具有相同的高度

Question

我有一个小问题，我知道如何在CSS网格中重叠项目，但是我不知道如何使它们具有相同的高度（我不能重叠），我看不到。 / p>

到目前为止，这是我所做的，也尝试过与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 */ } 在隐式行之间平均分配容器空间，从而创建相等高度的网格区域。

{{1}}