保持网格项目的内容高度，从而防止它们匹配其父级高度 - CSS

Question

我有一个网格，其中两个网格项（列）之一有自己的网格。这个内部网格也是两列，用于存放博客文章。

我希望内部网格中的文章不会拉伸父容器的整个高度，而是有效地自上而下堆叠，并且它们的高度被限制为其内容的高度（即文本 +给定的填充）。这可能吗？

在示例代码中，这意味着黄色 <article> 元素堆叠在列的顶部并仍由网格间隙分隔。

代码片段在下方或CodePen在此处：https://codepen.io/emilychews/pen/WNwNayG

* {
  box-sizing: border-box;
  position: relative;
}

body {
  margin: 0;
  width: 100%;
  height: 100vh;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  background: #fff;
  width: 50%;
  height: 90%;
}

.inner-wrapper {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  height: 100%;
  padding: 2rem;
}

.column {
  background: lightgray;
}

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

/* GRID ITEMS THAT I WANT TO RESTRICT THEIR HEIGHT TO THAT OF THEIR CONTENT */
.article {
  padding: 1rem;
  background: yellow;
  margin: 0 0 0.5rem 0;
}

<main class="main">
  <div class="inner-wrapper">
    <div class="column column-1">
      <article class="article">Lorem Ipsum</article>
      <article class="article">Lorem Ipsum</article>
      <article class="article">Lorem Ipsum</article>
      <article class="article">Lorem Ipsum</article>
    </div>
    <aside class="column column-2"></aside>
  </div>
</main>

Answer 1

添加align-content: start;

.column-1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
  align-content: start;
}

保持网格项目的内容高度，从而防止它们匹配其父级高度 - CSS

Keep Grid Items The Height Of The Content and Thus Prevent Them Matching Their Parent Height - CSS

html

css

height

css-grid