如何基于Flex或Grid实现动态网格布局？

我正纠结如何用CSS创建这种特定的动态网格，目前尝试用CSS Grid实现，但不确定是否应该改用Flexbox。需求布局如下：

我在VueJS中进行开发，现有代码如下：

<script setup lang="ts">
const gridStyle = computed(() => {
  const base = 'grid-auto-rows: minmax(0, 1fr); grid-auto-flow: column;'
  if (visibleItems.value.length === 1) {
    return 'grid-template-columns: 1fr; ' + base
  } else if (visibleItems.value.length === 3) {
    return 'grid-template-columns: 4fr 1fr; ' + base
  } else {
    return 'grid-template-columns: 3fr 1fr 1fr; ' + base
  }
})
const itemStyle = (item: iFrame, index: number) => {
  const remainingItems = visibleItems.value.length - 2
  if (index === 0 && !itemIsVisible(items.value[1])) {
    return 'grid-row: span 4; grid-column: span 2; height: 100vh;'
  } else if (index < 2 && items.value.indexOf(item) < 2) {
    return 'grid-row: span 4; height: 100vh;'
  } else if (remainingItems === 1) {
    if (index === 1) {
      return `grid-row: span 1; `
    }
    if (index === 2) {
      return `grid-row: span 3; `
    }
  } else {
    const rowsToSpan = Math.min(4, Math.floor(4 / Math.max(1, remainingItems)))
    return `grid-row: span ${rowsToSpan};`
  }
}
</script>
<div class="grid h-screen gap-0" :style="gridStyle">
    <div
      v-for="(item, index) in visibleItems"
      :key="item.id"
      class="h-full w-full"
      :style="itemStyle(item, index)"
    ></div>
</div>

这段代码已实现大部分效果，但元素数量为2、3、4、5个时仍存在视觉小问题待解决。

内容的提问来源于stack exchange，提问作者Bonteq