css - 角度 *ngFor 引导列最后一个溢出到下一列

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

标签： cssbootstrap-4multiple-columnsangular7

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>