angular * ng Для столбцов начальной загрузки последний переполняется до следующего столбца

Question

У меня есть содержимое различного размера, чтобы ngFor зацикливаться и заполнять отзывчивый 3 столбец (содержимое должно течь вниз, а не перегружаться) модальным телом.Последний элемент в первом и втором столбцах обрезается и попадает в начало следующего столбца.Как я могу сохранить содержимое каждой группы вместе?Есть ли способ проверить, не поместится ли это содержимое внизу этого столбца, а затем переместить все это вверх к следующему?Это объясняется тем, что при уменьшении ширины он будет переходить к 2 столбцам, а затем к 1 столбцу, поэтому он должен динамически заполняться циклом.

Код:

<div class="modal-body">
    <div class="m-4">
    <div class="columns">
        <div class="green" *ngFor="let cat of categories;let index = index;">
          <div class="row no-gutters justify-content-left text-left">
            <span class="cat-title">title {{index}}</span>
            <span class="cat-subtitle" *ngIf="cat.subtitle">&nbsp;subtitle</span>
          </div>
          <div class="row no-gutters justify-content-left text-left nom-name" *ngIf="cat.iPicked">
            <span>winner picked</span>
          </div>                
          <hr/>              
        </div>
    </div>
  </div>
</div> <!-- end modal body -->

CSS:

.ballot-body {
height: 600px;
}
@media only screen and (min-width: map-get($grid-breakpoints, xs)) {
#title {
    font-size: medium;
}
.columns {
    columns: 1;
} 

- столбцы увеличиваются до 2, а затем до 3 с ростом точек останова

Answer 1

После попытки предложенного подхода у меня все еще были проблемы с макетом.Спасибо за предложение, хотя!Это было информативно, так как заставило меня посмотреть, какие существуют варианты сетки CSS.

В конце концов, потому что мой контент имеет неизвестную переменную высоту, и он должен быть отзывчивым (3 столбца, 2 столбца, 1 столбец),Я решил сделать регулярный * ngFor над моим списком, после того как он был переиндексирован в зависимости от размера окна.Теперь каждая отдельная группа остается в цикле.

 ------- parent component --------
// when screen is resized, control how the categoryArray is sorted (1, 2, 3 columns)
@HostListener('window:resize', ['$event'])
onresize() {
  this.changeCategoryArray(window.innerWidth);
}

changeCategoryArray(innerWidth) {
    let arrayToUse = [];

    if (innerWidth >= 992) {
      if (this.currentNumberOfColumns !== 3) {
        this.currentNumberOfColumns = 3;
        arrayToUse = this.threeColArray;
      }
    } else if (innerWidth < 992 && innerWidth >= 576) {
       if (this.currentNumberOfColumns !== 2) {
        this.currentNumberOfColumns = 2;
        arrayToUse = this.twoColArray;
       }
    } else if (innerWidth < 575) {
       if (this.currentNumberOfColumns !== 1) {
        this.currentNumberOfColumns = 1;
        arrayToUse = this.oneColArray;
       }
    }
    // only change it if it is not already set to the this number of columns
    if (arrayToUse.length) {
      for (let i = 0; i < this.categories.length; i++) {
        this.newCategoryArray[arrayToUse[i]] = this.categories[i];
      }
    }
}

------------html----------
<div class="modal-body">
    <div class="row m-4">
        <div class="col-12 col-sm-6 col-lg-4" *ngFor="let item of newCategoryArray">
            <ballot-category [categoryItem]="item"></ballot-category>
        </div>
    </div>
</div> <!-- end modal body -->

-----<ballet-category>------
<div class="pl-4 pr-4">
   <div class="justify-content-sm-start justify-content-center text-sm-left text-center">
     <span class="cat-title" [ngClass]="{'title-notPicked': !categoryItem.iPicked}">{{categoryItem.name}}</span>
     <span class="cat-subtitle" *ngIf="categoryItem.subtitle" [ngClass]="{'title-notPicked': !categoryItem.iPicked}">&nbsp;{{categoryItem.subtitle}}</span>
   </div>
   <div class="justify-content-sm-start justify-content-center text-sm-left text-center nom-name" *ngIf="categoryItem.iPicked">
     <span>{{categoryItem.nomPicked}}</span>
   </div>
   <div class="justify-content-sm-start justify-content-center text-sm-left text-center nom-name-notPicked" *ngIf="!categoryItem.iPicked">
     <span>/// Not chosen yet ///</span>
   </div>
   <hr />
</div> 

Answer 2

Вы можете использовать CSS GRID для решения проблемы, класс .columns должен иметь свойство display: grid;.

.columns {
  width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 30px;
  grid-auto-flow: column;
  grid-template-columns: 1fr 1fr 1fr;
  
}

.features-1, .features-2, .features-3  {
  background: red;
}

<div class="columns">
  <div class="features-1">
      Feature 1
  </div>
  <div class="features-2">
    Feature 2
  </div>
  <div class="features-3">
    Feature 3
  </div>
  <div class="features-3">
    Feature 3
  </div>
  <div class="features-3">
    Feature 3
  </div>
  <div class="features-3">
    Feature 3
  </div>
  <div class="features-3">
    Feature 3
  </div>
  <div class="features-3">
    Feature 3
  </div>
  <div class="features-3">
    Feature 3
  </div>
</div>