Как отобразить две сетки рядом, используя сетку Angular 6 -Ag

#ag-grid

#ag-сетка

Вопрос:

Я пытаюсь разместить две сетки рядом, но вторая сетка автоматически перемещается на следующую строку.

Я уменьшил ширину сеток до 40% каждая, а также попытался разместить сетки <span> , но все равно я не могу отображать сетки рядом друг с другом.

Ответ №1:

Использование flexbox должно решить вашу проблему:

 .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>