我有一个CSS网格,在这个网格文章中可能是博客帖子。它们由左侧的图像和右侧的文本组成。
我需要从底部开始文章,以便在它们上方显示较新的文章。但是我无法让它们从底部开始,无论我尝试它不起作用。 align-items: end;
应该做的但是它没有...所以我在这里缺少什么?
.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>
您可以将flexbox与主网格一起使用,并仅为帖子保留CSS网格。
.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>
那我在这里错过了什么?
您忽略了HTML元素默认为height: auto
(参见下面的参考资料)。这意味着它们是其内容的高度。这意味着没有额外的空间用于垂直对齐。
这是您的代码的简化版本。我在容器周围添加了边框。注意高度是如何自动“缩小到适合”的。
.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>
因此,非常简单,为容器添加高度以创建额外的空间。
.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>
另见:
align-items
vs align-content
的更多细节)