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

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;
}

由于您尚未定义任何行或列，因此为容纳网格项而创建的任何行或列都将是隐式。

隐式行的行大小函数由 grid-auto-rows 属性控制。它的默认值为 auto(基于内容)。这就是您看到不同高度的原因:每个框中内容的长度不同。

解决方案是用 1fr 覆盖默认值，然后在隐式行之间平均分配容器空间，创建等高的网格区域。

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