3

I have a CSS grid and in this grid articles that could be blog posts. They consist of an image on the left and text on the right.

I need the articles to start at the bottom, so that newer articles appear above them. But I just can't get them to start at the bottom whatever I try it's not working. align-items: end; should do the trick but it doesn't … So what am I missing here? 

.blog-Grid {
  display: grid;
}

.post {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 50%;
  margin: 0 0 10% 15%;
}
<section class="blog-Grid">
  <article class="post">
    <img id="img" src="images/img1.jpeg" alt="">
    <div class="post-text-box">
      <h3 class="post-header"> I'm a header </h3>
      <p class="post-text"> Lorem ipsum text. </p>
    </div>
  </article>
  <article class="post">
    <img id="img" src="images/img2.jpg" alt="">
    <div class="post-text-box">
      <h3 class="post-header"> I'm a header </h3>
      <p class="post-text"> Lorem ipsum text.</p>
    </div>
  </article>
</section>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Unknown User
  • 505
  • 1
  • 7
  • 19
  • https://jsfiddle.net/szejxkvj/2/ ? – Vega Mar 18 '18 at 23:29
  • 1
    An illustration of what the final product should be would make the question better seeing that you have placed `grid-template column`s in the posts. Ideally this is supposed to be attached to the class with `display: grid` to outline the grid. – omukiguy Mar 19 '18 at 06:36

2 Answers2

1

You can use flexbox with the main grid and keep CSS grid only for posts.

.blog-Grid {
  display: flex;
  min-height:200vh;
  flex-direction:column;
  justify-content:flex-end;
}

.post {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 50%;
  margin: 0 0 10% 15%;
}
<section class="blog-Grid">

  <article class="post">
    <img id="img" src="https://lorempixel.com/400/200/" alt="">

    <div class="post-text-box">
      <h3 class="post-header"> I'm a header </h3>
      <p class="post-text"> Lorem ipsum text. </p>
    </div>

  </article>

  <article class="post">
    <img id="img" src="https://lorempixel.com/400/200/" alt="">

    <div class="post-text-box">
      <h3 class="post-header"> I'm a header </h3>
      <p class="post-text"> Lorem ipsum text.</p>
    </div>

  </article>


</section>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
0

So what am I missing here?

You're overlooking the fact that HTML elements are, by default, height: auto (see reference below). This means they are the height of their content. This means there is no extra space for vertical alignment.

Here is a simplified version of your code. I added a border around the container. Note how the height is automatically "shrink-to-fit".

.blog-Grid {
  display: grid;
  border: 2px solid red;
}

.post {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

* {
  margin: 0;
  box-sizing: border-box;
}
<section class="blog-Grid">
  <article class="post">
    <img id="img" src="images/img1.jpeg" alt="">
    <div class="post-text-box">
      <h3 class="post-header"> I'm a header </h3>
      <p class="post-text"> Lorem ipsum text. </p>
    </div>
  </article>
  <article class="post">
    <img id="img" src="images/img2.jpg" alt="">
    <div class="post-text-box">
      <h3 class="post-header"> I'm a header </h3>
      <p class="post-text"> Lorem ipsum text.</p>
    </div>
  </article>
</section>

So, very simply, add height to your container in order to create extra space.

.blog-Grid {
  display: grid;
  height: 100vh;
  align-content: end;
  border: 2px solid red;
}

.post {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

* {
  margin: 0;
  box-sizing: border-box;
}
<section class="blog-Grid">
  <article class="post">
    <img src="http://i.imgur.com/60PVLis.png" width="100" height="100" alt="">
    <div class="post-text-box">
      <h3 class="post-header"> I'm a header </h3>
      <p class="post-text"> Lorem ipsum text. </p>
    </div>
  </article>
  <article class="post">
    <img src="http://i.imgur.com/60PVLis.png" width="100" height="100" alt="">
    <div class="post-text-box">
      <h3 class="post-header"> I'm a header </h3>
      <p class="post-text"> Lorem ipsum text.</p>
    </div>
  </article>
</section>

jsFiddle demo

Also see:

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701