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

What I am trying to do is best describes with an example.

I have am Angular application, which has list if items (number of items known until runtime), and has two main display columns, and an optional error element.

I would like to lay these columns out so that the first column just takes up what room it needs, and the second can take up the rest (i.e. label / value)

However, I would also kike to optionally display an error under both columns, if there is an error. Here is a full example which is also

Now, if I add the error, the first column will expand way over.

My question is, is there a way to have the error span the two columns, and not push out the first, eg something like

Can anyone help me to do this?

CodePudding user response：

You can add a class with a grid-column: 1/3 to the error label. This make the error label fill the entire width (two columns)