Сохраняйте элементы сетки на высоте содержимого и, таким образом, не позволяйте им соответствовать их родительской высоте - 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;
}