使网格区域的高度相同

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 */
}

在隐式行之间均匀分布容器空间，从而创建相等高度的网格区域。

qazxswpoi