如何设置基于flex或grid的动态网格

Question

我正在摸索如何使用 CSS 创建这个特定的动态网格。我一直在尝试使用 CSS 网格，但我很好奇是否应该使用 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>

这段代码已经帮我解决了大部分问题，但是当我有两个、三个、四个和五个我想整理的项目时，会出现一些小的视觉问题。

Answer 1

另一种设置方法是使用 CSS grid-template-areas。

这样您就可以简单地控制每个项目的布局。

此代码片段使用 JS 查找项目数量，CSS 完成其余工作：

<style>
  .grid {
    display: grid;
    width: 100vmin;
    aspect-ratio: 16/ 9;
    gap: 1vw;
  }
  
  .grid.n1 {
    grid-template-areas: 'A';
  }
  
  .grid.n2 {
    grid-template-areas: 'A A A A A B B';
  }
  
  .grid.n3 {
    grid-template-areas: 'A A A A A B B' 'A A A A A C C' 'A A A A A C C' 'A A A A A C C';
  }
  
  .grid.n4 {
    grid-template-areas: 'A A A B B C' 'A A A B B D' 'A A A B B D' 'A A A B B D';
  }
  
  .grid.n5 {
    grid-template-areas: 'A A A B B C' 'A A A B B D' 'A A A B B E' 'A A A B B E';
  }
  
  .grid.n6 {
    grid-template-areas: 'A A A B B C' 'A A A B B D' 'A A A B B E' 'A A A B B F';
  }
  
  .grid.n7 {
    grid-template-areas: 'A A B B C C G' 'A A B B D D G' 'A A B B E E G' 'A A B B F F G';
  }
  
  .grid.n8 {
    grid-template-areas: 'A A B B C C G' 'A A B B D D H' 'A A B B E E H' 'A A B B F F H';
  }
  
  .grid>* {
    width: 100%;
    height: 100%;
    background: gray;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .grid :nth-child(1) {
    grid-area: A;
  }
  
  .grid :nth-child(2) {
    grid-area: B;
  }
  
  .grid :nth-child(3) {
    grid-area: C;
  }
  
  .grid :nth-child(4) {
    grid-area: D;
  }
  
  .grid :nth-child(5) {
    grid-area: E;
  }
  
  .grid :nth-child(6) {
    grid-area: F;
  }
  
  .grid :nth-child(7) {
    grid-area: G;
  }
  
  .grid :nth-child(8) {
    grid-area: H;
  }
</style>
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>
<script>
  const grid = document.querySelector('.grid');
  const n = document.querySelectorAll('.grid > *').length;
  grid.classList.add('n' + n);
</script>