Как настроить динамическую сетку на основе гибкой или сетки ⇐ CSS

[Anonymous]

Я ломаю голову над тем, как создать эту конкретную динамическую сетку с помощью CSS. Я пытался сделать это с помощью CSS-сетки, но мне интересно, стоит ли мне вместо этого использовать Flexbox.

Я прикрепляю нужный настраиваемый макет ниже к созданному мной макету.





Я пытаюсь сделать это в VueJS, и на данный момент у меня есть вот такой код:

constgridStyle = вычисленный(() => { const base = 'grid-auto-rows: minmax(0, 1fr); сетка-авто-поток: столбец;' если (visibleItems.value.length === 1) { return 'grid-template-columns: 1fr; ' + база } else if (visibleItems.value.length === 3) { return 'grid-template-columns: 4fr 1fr; ' + база } еще { return 'grid-template-columns: 3fr 1fr 1fr; ' + база } }) const itemStyle = (элемент: iFrame, индекс: число) => { const ОставшиесяItems = видимыеItems.value.length - 2 if (index === 0 && !itemIsVisible(items.value[1])) { return 'строка сетки: диапазон 4; столбец сетки: пролет 2; высота: 100vh;' } else if (index < 2 && items.value.indexOf(item) < 2) { return 'строка сетки: диапазон 4; высота: 100vh;' } еще если (оставшиесяItems === 1) { если (индекс === 1) { return `grid-row: span 1; ` } если (индекс === 2) { return `grid-row: span 3; ` } } еще { const rowsToSpan = Math.min(4, Math.floor(4 / Math.max(1, restItems))) return `grid-row: span ${rowsToSpan};` } } Этот код помог мне почти полностью разобраться, но возникают небольшие визуальные проблемы, когда мне нужно разобраться с двумя, тремя, четырьмя и пятью элементами.