Question

我有一个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>

Answer 1

您可以将flexbox与主网格一起使用，并仅为帖子保留CSS网格。

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 2

那么我在这里缺少什么？

您忽略了HTML元素默认为height: auto的事实（请参阅下面的参考资料）。这意味着它们是其内容的高度。这意味着没有额外的空间用于垂直对齐。

以下是代码的简化版本。我在容器周围添加了边框。注意高度如何自动＆＃34;收缩到适合＆＃34;。

＆＃13;

.blog-Grid {
  display: grid;
  border: 2px solid red;
}

.post {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

* {
  margin: 0;
  box-sizing: border-box;
}

＆＃13;

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

＆＃13;

因此，非常简单，为容器增加高度以创造额外的空间。

＆＃13;

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

＆＃13;

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

＆＃13;

jsFiddle demo

另见：

Block elements consume the full width of their parent, by default. This behavior does not extend to height.
What is the difference between align-items vs. align-content in Grid Layout?
The difference between justify-self, justify-items and justify-content in CSS Grid（有关align-items vs align-content）

从底部开始定位网格项

2 个答案:

jsFiddle demo