Reputation: 525
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>
Upvotes: 4
Views: 11748
Reputation: 372194
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>
Also see:
align-items
vs align-content
)Upvotes: 0
Reputation: 274307
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>
Upvotes: 1