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

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

Сообщение 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

Вернуться в «Html»