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

[Anonymous]

Я пытаюсь создать следующий макет на рабочем столе:


И пусть он быстро адаптируется к этому на мобильных устройствах (уведомление об участниках указывается перед публикацией):


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


.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
< /code>
< /div>
< /div>
< /p>
Тогда есть большой разрыв между заголовком и сообщениями на рабочем столе, тогда как я Хочу, чтобы он был свободно, и каждый предмет был только таким же большим, как и должен. Можно ли это сделать? Не стесняйтесь менять HTML, чтобы заставить его работать (или даже не использовать сетку, если есть лучший способ). Нет JavaScript, пожалуйста,


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