ДИСПЛЕЙ: СЕТКА с карточками переменной высоты создает промежутки между рядами [дубликат] ⇐ CSS

[Anonymous]

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

{#each data.combinedArray как сервер} {/каждый} .контейнер { дисплей: сетка; Grid-template-columns: повторение (автозаполнение, minmax (18.75rem, 1fr)); зазор в сетке: 1рем;} Видео о пробелах и реагировании

РЕДАКТИРОВАТЬ: Я заметил, что этот вопрос был автоматически закрыт с ответом, ведущим к решению grid-template-rows: masonry;. Однако это всего лишь экспериментальный вариант, и ни один браузер его официально не поддерживает, поэтому я все еще ищу облегченное решение.