Как сделать так, чтобы Grid сетка занимала высоту элемента?

Question

[Huntgold]

Есть 5 элементов Grid:
Col1 Content
Col2 Content
Col3 Content
Col4 Content

Нужно чтобы элемент сетки Content всегда занимал высоту равную высоте контента в нем. А также чтобы другие элементы сетки слева занимали высотку равную высоте контента в них и не обращали внимания на Content. Как это сделать?

display: grid;
  grid-template-columns: 20% 80%;
  grid-template-rows: auto auto auto auto;
  gap: 10px;
  grid-template-areas: "col1 content"
                       "col2 content"
                       "col3 content"
                       "col4 content";

Answer 1

[Ankhena]

align-self: start;
либо
align-items: start;



Но если контента в правом столбце будет больше, чем в левом, то нужно добавить еще один налево.
Вот так

Comments

[Huntgold]

А если контента в правом бесконечно? К примеру контент будет прогружаться до бесконечности при скроле?

[Ankhena]

Huntgold, и что именно не получается в таком случае?

[Huntgold]

Сработало, спасибо для левых блоков. Но основной блок с контентом все равно занимает всю высоту. Сделал как написал: ". content", не сработало

[Ankhena]

Huntgold, показывайте в песочнице.
В моей второй песочнице при изменении ширины поля с результатом видно, что обе части ведут себя как описано в вопросе.