Question

3 columns ngFor

我有各种大小的内容要循环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 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>

Answer 2

尝试了建议的方法后，我仍然在布局方面遇到问题。还是）感谢你的建议！它提供了很多信息，因为它引导我研究了存在的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>

angular * ng对于引导程序列，最后一个溢出到下一列

2 个答案: