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

Question

我想要做的最好用一个例子来描述。我有一个 Angular 应用程序，它具有列表项（直到运行时已知的项数），并且有两个主要显示列和一个可选的错误元素。

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

但是，如果有错误，我也愿意在 两个 列下显示错误。这是一个完整的例子，也是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

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