Как иметь независимую высоту столбца в сетке 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;
}
}

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