Css 角度*Ng对于引导列，上一列溢出到下一列

我有不同大小的内容，以

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

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

---

--当断点增长时，列会先增长到2，然后增长到3。您可以使用CSS GRID来解决这个问题，

。columns

类应该有一个

显示：GRID属性


.columns{
宽度：1000px；
保证金：0自动；
显示：网格；
网格模板行：1fr 1fr 1fr；
栅极间隙：30px；
网格自动流：列；
网格模板柱：1fr 1fr 1fr；
}
.features-1、.features-2、.features-3{
背景：红色；
}

特征1
专题2
专题3
专题3
专题3
专题3
专题3
专题3
专题3
尝试了建议的方法后，我的布局仍然存在问题。谢谢你的建议！它提供了大量信息，让我了解了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> 

----父组件--------
//调整屏幕大小时，控制categoryArray的排序方式（1、2、3列）
@HostListener（'窗口：调整大小'，['$event']））
onresize（）{
this.changeCategoryArray（window.innerWidth）；
}
changeCategoryArray（内部宽度）{
让数组使用=[]；
如果（内部宽度>=992）{
if（this.currentNumberOfColumns！==3）{
此.currentNumberOfColumns=3；
arrayToUse=this.threeColArray；
}
}否则如果（innerWidth<992&&innerWidth>=576）{
if（this.currentNumberOfColumns！==2）{
此.currentNumberOfColumns=2；
arrayToUse=this.twoColArray；
}
}否则如果（内部宽度<575）{
if（this.currentNumberOfColumns！==1）{
此.currentNumberOfColumns=1；
arrayToUse=this.oneColArray；
}
}
//仅在尚未将其设置为此列数时才对其进行更改
if（阵列使用长度）{
for（设i=0；i