Form Layout with Auto-Placement

Use CSS Grid Layout to automatically arrange form elements.

You can use the implicit grid to your advantage when creating forms and any other collection of elements that require alignment in a grid-like fashion.

For example, you can use the implicit grid to do stuff like this:

Wireframe of a simple form.
Example of a simple form.

And when you add form elements to the markup, the implicit grid will add rows to accommodate them.

So we can create the above form using the following markup:

No extra markup is required in order to get things to align properly. And there's no need to add any classes to form elements. We only add one class to the form element (and even that's optional).

The layout is provided by CSS grid.

Here's a working example:

View Output

You can add new form items and they will automatically be aligned with the others, because they will be placed into the implicit grid.

This is made possible because we've made the form itself a grid (the .myForm class has display: grid applied to it). We then specified that the labels go in one column and the controls in the other.

Here's another example, this time with more form elements:

Another example of a form with auto-placed elements.
Example of a slightly more complex form with auto-placed elements.

And here's the code:

View Output

Forms and Subgrids

Once subgrids have widespread browser support, it will be possible to align form elements that are not direct children of the form element (such as lists of form elements).