html - 如何垂直折叠网格列？

Question

我一辈子都找不到如何折叠 CSS 网格中的左上角列。而不是增长到它在右边的兄弟的高度，左上角的孩子应该保持它的原始高度，将下面的任何东西向上移动。

这可能是一行修复，但你知道...... CSS

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

.item {
  outline: 1px solid black;
  margin: 0;
  border: 0.25px solid white;
  display: inline-block;
}

<div class="grid">
  <div class="item">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis at tellus eu consectetur. Curabitur nisi dolor, egestas non eleifend.
  </div>
  <div class="item">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu venenatis orci. Donec imperdiet odio massa, id ornare urna aliquet sed. Duis feugiat hendrerit diam nec faucibus. Curabitur diam erat, pharetra at laoreet quis, gravida nec neque. Phasellus nisi ex.
  </div>
  <div class="item">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis at tellus eu consectetur. Curabitur nisi dolor, egestas non eleifend.
  </div>
</div>

标签： htmlcsscss-grid