Как создать сетку, похожую на гибкий перенос строк, но если высота отличается, элементы не будут растягиваться [дубликат ⇐ CSS

[Anonymous]

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


На этом изображении вы можете видеть, что левый элемент растянут.
Это мой CSS:

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

.grid-container {
display: grid;
width: 100%;
grid-template-columns: repeat(auto-fill, minmax(33%, 1fr));
gap: 10px;
}

.grid-item {
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: #121314;
padding: 20px;
}

.card-content {
flex-grow: 1;
}

.horizontal-line {
border-top: 1px solid #ccc;
}

Вот мой интерфейс:

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

function FluidGrid({ devices }: Readonly) {
return (

{devices.map(deviceArray => (

{deviceArray.map(device => (

))}

))}

);
}

Заранее спасибо!
С уважением Макс

Подробнее здесь: https://stackoverflow.com/questions/783 ... eres-it-wo