Search code examples
csscss-grid

Making grid areas the same height

I have a little problem, I know how to overlap items in a CSS grid, but I don't know how to make them have the same height (without overlap I can), which I don't see.

Here is what I've made so far, also tried with transformY(-xxxx%) to overlap it, but I don't think it's the right way to do what I want, so I did it with a CSS grid, now I'm just stuck to make them same height, here is what I've made so far :

.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>

you need to increase your screen size to get posts on 2 rows like this :

Rows CSS GRID

Solution

  • Your .post_container is a grid container. You have it set up like this:

    .post_container {
    display: grid;
}

    Since you haven't defined any rows or columns, any rows or columns created to accommodate grid items will be implicit.

    The row sizing function for implicit rows is controlled by the grid-auto-rows property. It's default value is auto (content-based). This is the reason you're seeing different heights: The length of the content is different in each box.

    The solution is to override the default with 1fr, which then distributes container space evenly among implicit rows, creating equal height grid areas.

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