Предотвратить растягивание высоты элементов сетки в соответствии с одноуровневыми элементами [закрыто] ⇐ CSS

[Anonymous]

Я создаю контейнер сетки. Контейнер имеет 3 столбца, большинство элементов сосредоточено во втором столбце, и мы можем иметь элементы полной ширины, охватывающие весь контейнер, и элементы, плавающие справа и слева. Суть CSS (на основе https://www.joshwcomeau.com/css/full-bleed/) выглядит так:

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

.grid {
display: grid;
grid-template-columns: 1fr min(70ch, calc(100% - 64px)) 1fr;
grid-column-gap: 32px;
padding: 0 1rem;
width: 900px;
margin: 0 auto;
}

.grid > * {
grid-column: 2;
}

.grid .left {
grid-column-start: 1;
}

.grid .right {
grid-column-start: 3;
}

.grid .fullwidth {
grid-column: 1 / -1;
}

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

left aside
[list]
[*]1
[*]2
[*]3
[*]4
[/list]



Title


document main content


right aside
Occaecat ex nisi sunt ea qui sint minim laboris irure occaecat.


Ut non voluptate laboris anim proident dolore. Pariatur sit cupidatat commodo voluptate velit. Tempor sint id commodo esse enim aliquip dolore laboris aute ipsum. Ad tempor et id irure cupidatat officia nisi esse pariatur consectetur.

Irure minim ea pariatur sunt voluptate Lorem dolor et reprehenderit pariatur Lorem. Veniam magna in sint ex non excepteur. Aliqua laboris nisi ex eu voluptate reprehenderit et deserunt ad et aliqua laborum aute. Qui veniam cupidatat ad exercitation velit in adipisicing nisi in ex adipisicing aute.


Ut non voluptate laboris anim proident dolore. Pariatur sit cupidatat commodo voluptate velit. Tempor sint id commodo esse enim aliquip dolore laboris aute ipsum. Ad tempor et id irure cupidatat officia nisi esse pariatur consectetur.

Моя главная проблема заключается в том, что элементы в центральном столбце растягиваются, чтобы соответствовать высоту одноуровневых элементов в первом и последнем столбце см. ниже.


Я пробовал использовать автоматический поток сетки: плотный и устанавливать высоту и максимальную высоту для центрированных элементов , но ни один из них не сделал этого. Я хочу, чтобы все элементы сохраняли свою первоначальную высоту, чтобы центрированные элементы можно было переместить наверх.

Подробнее здесь: https://stackoverflow.com/questions/789 ... h-siblings