时间戳

首页 > 解决方案 > CSS网格和ngRepeat

css - CSS网格和ngRepeat

问题描述

我的网格布局不能与 ngFor（或任何其他循环）一起正常工作。如果我将 class="container" 放在 ngFor div 上，它会创建两个容器，如果我将它放在外部 div 中，它就不起作用。如何为可重复列表创建网格布局？

  <div class="container">
      <div *ngFor="let house of array;let index=index;">
        <div class="item row2 col1">
          1<img src="assets/house-pic4.jpg" class="grid-image">
        </div>

        <div class="item row2 col2" *ngIf="index %2 == 0">
          2<img src="assets/house-pic2.jpg" class="grid-image">
        </div>

        <div class="item row2 col1" *ngIf="index %2 != 0">
          3<img src="assets/house-pic2.jpg" class="grid-image">
        </div>

        <div class="item row2 col2">
          4 <img src="assets/house-pic3.jpg" class="grid-image">
        </div>
      </div>
    </div>

CSS：

    .container {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 12vh;
    grid-auto-flow: dense;
    }

    .item {
    display: block;
    overflow: hidden;
    writing-mode: horizontal-tb;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0px;
    }

    .row2 {
    grid-row-end: span 2;
    }

    .row3 {
    grid-row-end: span 3;
    }

    .row4 {
    grid-row-end: span 4;
    }

    .row5 {
    grid-row-end: span 5;
    }

    .row6 {
    grid-row-end: span 6;
    }

    .col2 {
    grid-column-end: span 2;
    }

    .col3 {
    grid-column-end: span 3;
    }

标签： csscss-grid

解决方案

这是您正在寻找的更多内容吗？我用 an 替换了循环的 div，ng-container因此它不会显示在 dom 中。

<div class="container">
    <ng-container *ngFor="let house of array;let index=index;">
        <div class="item row2 col1">
            1<img src="assets/house-pic4.jpg" class="grid-image">
        </div>

            <div class="item row2 col2" *ngIf="index %2 == 0">
                2<img src="assets/house-pic2.jpg" class="grid-image">
        </div>

                <div class="item row2 col1" *ngIf="index %2 != 0">
                    3<img src="assets/house-pic2.jpg" class="grid-image">
        </div>

                    <div class="item row2 col2">
                        4 <img src="assets/house-pic3.jpg" class="grid-image">
        </div>
    </ng-container>
</div>

另一种选择是将循环的 div 设置display: contents为，以便在渲染时忽略它们。堆栈闪电战

    <div class="contents" *ngFor="let house of array;let index=index;">

.contents {
  display: contents;
}

推荐阅读