Как разместить столбцы и строки в диалоговом окне mat

Question

У меня есть диалоговое окно с матом в проекте Angular, и я хочу сделать 1 строку вверху и 3 строки внизу, как на картинке ниже, но по какой-то причине я не могу заставить его работать. Также мне не нужна горизонтальная полоса прокрутки и я пытаюсь скрыть ее, играя с шириной, но я не уверен, почему она все еще там. Любое предложение

HTML

<div mat-dialog-content  class="dialog-container">
  <div class="column">
    <div class="header">Tops</div>
  </div>  
  <div class="parent">
      <div class="left">
          <div class="sub-header">Left</div>
          <div style="background-color: darkblue;">
            <div></div>
          </div>
      </div>
      <div class="center">
        <div class="sub-header">Center</div>
    </div>  


      <div class="right">
          <div class="sub-header">Right</div>
      </div>  
  </div>
</div>

CSS

.dialog-container{
    width: 1000px;
    height:1000px;
    overflow-x:hidden;
}   
.header{
    position: relative;
    font-size: 20px;
    text-align: center;
    font-family: 'Raleway';
}
.button{
    margin-top: 15px;
    align-items: center;
}
.clickable {
    cursor: pointer;
  }

  .parent {
    display: flex;
    overflow: hidden;
  }

  .column{
    display: flex;
    flex-direction: column;
    background-color: blue;
  }

  .left {
    width: 200px;
    background-color: green;
  }

  .right {
    width: 300px ;
    background-color: blue;
  }

  .center{
    width: 300px;
    background-color: red;
  }

  .header{
    font-size: 30px;
    font-family: "Raleway-ExtraLight";
    padding: 30px;
  }

  .sub-header{
    font-size: 20px; 
    margin-top: 25px;
    font-weight: bold;
  }

Сейчас это выглядит так

Окончательный дизайн, который я хочу достичь

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

Answer 1

Вы можете использовать мат-сетку. Вам просто нужно определить свою строку и столбцы, и все. У вас будет 4 столбца и 4 ряда. Ваши кнопки внизу будут go в div mat-dialog-actions, созданном для этого. Вот как вы могли бы использовать mat-grid-list: Демо на StackBlitz

Если демо не работает, вот код, чтобы вы могли его попробовать:

html:

<mat-grid-list cols="18" rowHeight="1:3">
  <mat-grid-tile [colspan]="3">Map Insights</mat-grid-tile>
  <mat-grid-tile [colspan]="7">
    <input type="text" placeholder="blablabla" />
  </mat-grid-tile>
  <mat-grid-tile></mat-grid-tile>
  <mat-grid-tile [colspan]="7"><i>Blablablabla your text in italic</i></mat-grid-tile>


  <mat-grid-tile [rowspan]="5" [colspan]="3">Your side bar</mat-grid-tile>
  <mat-grid-tile [rowspan]="5" [colspan]="7"></mat-grid-tile>
  <mat-grid-tile [rowspan]="5">=></mat-grid-tile>
  <mat-grid-tile [rowspan]="5" [colspan]="7"></mat-grid-tile>
</mat-grid-list>

css:

mat-grid-tile {
  background: lightblue;
}

Css здесь только для отображения блоков;)