如何使用 tailwind 实现像 google meet 一样的 Best Fit Layout 与网格

Question

我想使用 Tailwindcss 构建视频会议屏幕布局，我希望它能够自动适应列和行中的项目：

如果我的风格是这样的：

<div class="grid grid-flow-col gap-4">
    <video-app class="video" *ngFor="let video of studentsVideo" [video]="video" ></video-app>
</div>

它只扩展列，不会创建新行。我该如何设计这个布局？

更新：

我们知道有用户加入会议。我们有用户的长度，我们可以动态设置 grid-cols-{n} 和 grid-rows-{n} 但我们如何计算它来检测行和列的最佳拟合数字？

谢谢。

Answer 1

您可以使用grid-cols-{}和定义变量grid-rows-{}，查看官方以使用Grid Flow

所以试试这个

<div class="grid grid-flow-col grid-cols-4 grid-rows-4 gap-4 bg-gray-200">
...
    <video-app class="video bg-red-300 text-center" *ngFor="let video of studentsVideo" [video]="video" >5</video-app>
    <video-app class="video bg-red-300 text-center" *ngFor="let video of studentsVideo" [video]="video" >6</video-app>
...
</div>

检查顺风游乐场

回答附加问题：

如果可以的话，javascript您将能够轻松调整它:)

Math.sqrt() 函数返回数字的平方根，即

1 => 1

2 => 2

4 => 2*2

9 => 3*3

...

  const totalMembers = 4;
  const shape = round(Math.sqrt(totalMembers));
  const result = `grid-cols-${shape} grid-rows-${shape}`;
  const VideoComponent = () => <video-app class="video" *ngFor="let video of studentsVideo" [video]="video" >6</video-app>;

    return (
    <div class={`grid grid-flow-col ${result} gap-4 bg-gray-200 min-w-full`}>
        {
          let i =0;
          while (i < totalMembers) {
           return <VideoComponent />
          }
        }
    </div>
  );