How to display two grids side by side using Angular 6 -Ag grid

问题

I am trying to place two grids side by side ,but the second grid is automatically shifted to the next line.

I have reduced the width of the grids to 40% each ,and also tried to place the grids in <span> ,But still I am not able to display the grids beside each other.

回答1:

Using flexbox should solve your problem:

.row {
  display: flex;
}

.column {
  flex: 50%;
  padding: 10px;
  height: 500px;
}

<div class="row">
  <div class="column">
    <ag-grid-angular [gridOptions]="firstGrid" class="ag-theme-balham"></ag-grid-angular>
  </div>
  <div class="column">
    <ag-grid-angular [gridOptions]="secondGrid" class="ag-theme-balham"></ag-grid-angular>
  </div>
</div>

来源：https://stackoverflow.com/questions/55687114/how-to-display-two-grids-side-by-side-using-angular-6-ag-grid