[help} grid system for forms

[cervenf]

Hi, I would like to ask how to build simple form like this: I tried to use https://primeflex.org/formlayout But I have no idea how to start a new "row". I would like to have Id input on first row and then continue on second row with other fields.

Thank you.

[nguyen-hai-nam]

Grid system includes a 12 column based layout utility. The width of a column is defined with the col-{number} style class. When the number of columns exceed 12, columns wrap to a new line. For the blank space, you can use a <div class="col-{number}"></div> with no content inside.

[mconner]

@cervenf, (and @nguyen-hai-nam, please correct me if I'm wrong), but there's no official row class. Because it wraps at 12, you effectively have a row. This is terser than grid > row > col structure, but more importantly (I think), it better supports different responsive breakpoints. On the other hand, if you are mixing col-n and col-fixed, you can't use a co-n to take up the additional space, since you don't necessarily know how much to use, or even have an exact 1/12 to use up. In that case, you could use a separate grid for each "row" to ensure, for example, "Manufacturer" starts a new row.

It would be nice if the documentation included some recipes for dealing with common issues like this.

[cervenf]

Thank you for your response. I'm backend developer and worked a bit with Bootstrap before so maybe that is the reason that I would expect a row here. Row looks simpler to me then define spacer. Then I need to hide spacer on smaller devices etc. But maybe I'm not so good at fronted yet and don't see advantages of these approach yet. Yes, documentation how to handle these cases would be nice. Thank you for your response :)