Сетка вертикального позиционирования со строкой

Question

У меня есть такой вид:

И мой код:

<div class="row">
  <div eds-tile class="xl-4" style="height: 700px">
    <eds-tile-title>User on Shift</eds-tile-title>
    <!-- <eds-gauge [settings]="gaugeScore"></eds-gauge> -->
  </div>
  <div eds-tile class="xl-4" style="height: 200px">
    <eds-tile-title>Count of Ticket Closed</eds-tile-title>
  </div>
  <div eds-tile class="xl-4" style="height: 200px">
    <eds-tile-title>Total Ticket</eds-tile-title>
  </div>
  <div eds-tile class="xl-8" style="height: 400px">
    <eds-tile-title>User on Shift Indicator</eds-tile-title>
  </div>
</div>

Что мне делать, если я хочу переместить пользователя на ShiftПоле индикатора под полем Count of Ticket Closed и полем Total Ticket?

Помогите, ребята, спасибо ...

Answer 1

Для достижения ожидаемого результата используйте нижеприведенную опцию использования класса xl-12 для div "User on Shif" и переместите его ниже - "Count of Ticket Closed" и "Total Ticket"

<div class="row">
  <div eds-tile class="xl-4" style="height: 200px">
    <eds-tile-title>Count of Ticket Closed</eds-tile-title>
  </div>
  <div eds-tile class="xl-4" style="height: 200px">
    <eds-tile-title>Total Ticket</eds-tile-title>
  </div>
  <div eds-tile class="xl-12" style="height: 700px">
    <eds-tile-title>User on Shift</eds-tile-title>
    <!-- <eds-gauge [settings]="gaugeScore"></eds-gauge> -->
  </div>
  <div eds-tile class="xl-8" style="height: 400px">
    <eds-tile-title>User on Shift Indicator</eds-tile-title>
  </div>
</div>

Answer 2

Вы можете вложить один макет в другой, два столбца как 4/8, а затем в столбце 8 вы можете сделать строку полной, а другую половину / половину.

Может быть, проще с кодом

<div class="row">
    <div eds-tile class="xl-4" style="height: 700px">
        <eds-tile-title>User on Shift</eds-tile-title>
        <!-- <eds-gauge [settings]="gaugeScore"></eds-gauge> -->
    </div>
    <div class="xl-8">
        <div class="row">
            <div eds-tile class="xl-6" style="height: 200px">
                <eds-tile-title>Count of Ticket Closed</eds-tile-title>
            </div>
            <div eds-tile class="xl-6" style="height: 200px">
                <eds-tile-title>Total Ticket</eds-tile-title>
            </div>
        </div>
        <div class="row">
            <div eds-tile class="xl-12" style="height: 400px">
                <eds-tile-title>User on Shift Indicator</eds-tile-title>
            </div>
        </div>
    </div>
</div>