如何使用 CSS 网格使可选的第三行跨越 Angular *ngFor 中的两列

Question

最好用一个例子来描述我正在尝试做的事情。我有一个 Angular 应用程序，它有 list if items（直到运行时已知的项目数），并且有两个主要显示列和一个可选的错误元素。

我想对这些列进行布局，以便第一列只占用它需要的空间，第二列可以占用其余的空间（即标签/值）。

但是，如果出现错误，我也愿意选择在两个列下显示错误。这是一个完整的例子，也是 here.

TypeScript

    constructor() {
            for (let i = 0; i < 12; i++) {
                const item: Item = {
                    label: `Item num${i}`,
                    value: i * 1000,
                    error: undefined
                    //error: i === 0 ? 'Item has a long long long error message' : undefined,
                };
                this.items.push(item);
            }
        }

HTML

    <div id="items-container">
        <ng-container *ngFor="let item of items">
            <div class="label-container">
                 <div class="label">{{item.label}}</div>
                 <div class="error">{{item.error}}</div>
            </div>
            <div>{{item.value}}</div>
        </ng-container> 
    </div>

CSS

    .error {
        color: red;  
        overflow-y: visible;
        white-space: nowrap;
    }

    #items-container {
        display: grid;
        grid-template-columns: min-content auto;    
        background: lightblue;
    }

    .label {
        white-space: nowrap;
        display: flex;
        justify-items: flex-start;
        align-items: center;
        margin-right: 20px;  
    }

现在，如果我添加错误，第一列将会扩展。

我的问题是，有没有办法让错误跨越两列，而不是推出第一列，例如

我怎样才能做到这一点？

Answer 1

您可以添加 class 和 grid-column: 1/3 到错误标签。这使错误标签填满整个宽度（两列）

如何使用 CSS 网格使可选的第三行跨越 Angular *ngFor 中的两列

How to use CSS grid to have optional third row span two columns inside an Angular *ngFor

css

css-grid

angular