Как иметь независимую высоту столбцов в сетке HTML CSS? ⇐ Html

[Anonymous]

Я пытаюсь создать следующий макет на настольном компьюте .png " /> < /p>
и сдать ему ответственность на это на мобильном телефоне (участники задания приходят до постов): < /p>

, и я не могу понять. Например, если у меня есть это: < /p>

Код: Выделить всё

.container {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto;
gap: 1rem;
max-width: 600px;
margin: 0 auto;
}

.title, .members, .posts {
padding: 1rem;
background: #f1f1f1;
}

@media (min-width: 768px) {
.container {
grid-template-columns: 2fr 1fr;
gap: 1rem;
align-items: start;
}

.members {
grid-column: 2;
grid-row: 1 / -1;
}
}< /code>

Title goes here
Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here
Posts go here

Тогда между заголовком и сообщениями на компьютере существует большой разрыв, тогда как я хочу, чтобы он текла свободно и чтобы каждый элемент был настолько большим, насколько это необходимо. Можно ли это сделать? Не стесняйтесь изменять HTML, чтобы он работал (или даже не используйте сетку, если есть лучший способ). Без JavaScript, пожалуйста

Подробнее здесь: https://stackoverflow.com/questions/793 ... l-css-grid