Блог

Я хочу создать макет экрана видеоконференции с помощью Tailwindcss, я хочу, чтобы он автоматически помещал элементы в столбцы и строки:

Если я буду выглядеть так:

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

он только расширяет столбцы и не создает новых строк. как я могу оформить этот макет?

Обновить:

Мы знаем, что у нас есть пользователи, желающие присоединиться к конференции. у нас есть количество пользователей, и мы можем динамически устанавливать значения сетки-{n} и строки сетки-{n}, но как мы можем рассчитать их, чтобы определить наиболее подходящие числа для строк и столбцов?

Спасибо.

Поскольку вы используете Angular, я тоже отвечаю на Angular. Вы можете легко сделать это с помощью [ngClass] :

 <div class="grid grid-flow-col"
[ngClass]="{
'grid-cols-1': currentUsers.length === 1,
'grid-cols-2': currentUsers.length > 1 amp;amp; currentUsers.length <= 4,
'grid-cols-3': currentUsers.length > 4 amp;amp; currentUsers.length <= 9,
'grid-cols-4': currentUsers.length > 9
}"
...
</div>
 

используя этот код в элементе сетки, вы можете изменять столбцы сетки в зависимости от количества пользователей.

Не стесняйтесь поиграть с ним в Стакблитце, который я сделал.

Вы можете определить переменную с grid-cols-{} помощью и grid-rows-{} , проверьте, как использовать поток сетки

так что попробуйте это,

 <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" >5</video-app>
    <video-app class="video bg-red-300 text-center" *ngFor="let video of studentsVideo" ="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" >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>
  );
 

Спасибо @JsWizard и @Al00X,

Я смешал ваши решения вместе:

Компонент.ts

 calculateGridLayout() {
        this.gridLayoutColsCount = Math.ceil(Math.sqrt(this.studentsVideo.length));
    }
 

Component.html

 <div
    [ngClass]="[
        'grid',
        'grid-cols-'   gridLayoutColsCount,
        'grid-rows-'   gridLayoutColsCount,
        'gap-4'
    ]"
>
    <video
        *ngFor="let video of studentsVideo"
        ="video"
    ></video>
</div>