如何创建灵活的房间布局？

Question

我正在尝试为我的桌面共享应用程序创建一个平面图。现在，房间是硬编码的，但是由于这并不是很好，我一直在拼命地寻找一种更好的解决方案，以使用户可以选择自己的布局，而不必手动创建每个html文件。

我正在使用Jhipster，并且创建了实体台和交易。如果您预订办公桌，它将创建一个带有时间，办公桌ID和用户的数据库条目（Transaction）。

现在看起来像this

有行和书桌，根据我需要它们的外观，我将css类添加到行/书桌，例如“ spaceRight”，以在右边添加边距。 （代码如下所示）

我还是一个初学者，我只是不知道如何解决这个问题...

<div class="row">
    <div id="test"></div>
    <div class="col-1"></div>
    <div class="col-2 desk card" *ngFor="let desk of allDesks | slice:0:1; let i = index">
        <div class="card-body">
            <div *ngIf="!desk.user" class="mycontainer" [routerLink]="['booking', desk.id]" routerLinkActive="active">
                <div class="container-left">
                    <img src="../../content/images/Icons/calendar-add.svg" class="add-icon">
                </div>
                <div class="container-right">
                    <div class="wrapperofcontainerright">
                        <h4 class="card-link-book">Book Desk</h4>
                    </div>
                </div>
            </div>
            <div *ngIf="desk.user" class="mycontainer">
                <div class="container-left">
                    <img src="../../content/images/Icons/desktop.svg" class="pc-icon">
                </div>
                <div class="container-right">
                    <div class="wrapperofcontainerright">
                        <h4 class="card-title">{{ desk.user.firstName }} {{ desk.user.lastName }}</h4>
                        <h4 class="card-title">{{ desk.placeholderForFuckingUp }}</h4>
                        <button *ngIf="checkIfSameUser(desk.user)" class="card-link-unbook" (click)="unbookDesk(desk.id)">Unbook</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-2 desk card spaceRight" *ngFor="let desk of allDesks | slice:1:2; let i = index">
        <div class="card-body">
            <div *ngIf="!desk.user" class="mycontainer" [routerLink]="['booking', desk.id]" routerLinkActive="active">
                <div class="container-left">
                    <img src="../../content/images/Icons/calendar-add.svg" class="add-icon">
                </div>
                <div class="container-right">
                    <div class="wrapperofcontainerright">
                        <h4 class="card-link-book">Book Desk</h4>
                    </div>
                </div>
            </div>
            <div *ngIf="desk.user" class="mycontainer">
                <div class="container-left">
                    <img src="../../content/images/Icons/desktop.svg" class="pc-icon">
                </div>
                <div class="container-right">
                    <div class="wrapperofcontainerright">
                        <h4 class="card-title">{{ desk.user.firstName }} {{ desk.user.lastName }}</h4>
                        <h4 class="card-title">{{ desk.placeholderForFuckingUp }}</h4>
                        <button *ngIf="checkIfSameUser(desk.user)" class="card-link-unbook" (click)="unbookDesk(desk.id)">Unbook</button>
                </div>
                </div>
            </div>
        </div>
    </div>