CSS components

Multi-Column Form Layout Generator

List your fields once and lay them out in two, three or four columns that collapse neatly on tablets and phones. Every field gets a proper label, an id and a sensible autocomplete hint.

Types: text, email, tel, number, date, password, url, select, textarea, checkbox. Span: 1 to 4 or full. For select fields, list options separated by commas in the fourth part.

Live preview




 Runs entirely in your browser. Nothing is uploaded to any server.







Why use a grid form layout
Shorter forms
Related fields side by side make long forms feel shorter.
Truly responsive
Columns drop to tablet and phone layouts automatically.
Accessible markup
Every field has a label, an id and autocomplete where it fits.



How to lay out a multi-column form
  1. List the fieldsOne field per line with its label, type and how many columns it spans.
  2. Pick the gridSet desktop and tablet columns, the phone breakpoint and the gap.
  3. Style and copyChoose the label position and field style, then copy the code.



How the form grid works
The form uses display: grid with repeat(n, minmax(0, 1fr)), which makes columns equal and lets long content shrink instead of overflowing. Fields that should be wider get a span class, and full-width fields use grid-column: 1 / -1.
On tablets the grid switches to fewer columns, and any field that spans more columns than are available becomes full width so no extra implicit columns appear. Below the phone breakpoint everything stacks into one column in the original reading order.
Autocomplete
Fields such as email, phone and names get autocomplete hints for faster filling.
Required fields
An asterisk is shown visually and the required attribute is added.
Left labels
Side labels switch back to top labels on small screens.



Multi-column form FAQ


Are multi-column forms bad for usability?
Unrelated fields in columns can slow people down. Pair related short fields such as first and last name or city and postcode, and keep long fields full width.


How do I make a field span two columns?
Put 2 in the span part of the line, or full to make it take the whole row.


What happens on mobile?
Below the breakpoint you choose, all fields stack into a single column in the order you listed them.


Does the form submit anywhere?
The form posts to # by default. Change the action attribute to your server endpoint or form service.


Why do labels use the for attribute?
Connecting labels to fields means clicking the label focuses the field and screen readers announce the label.





Try other CSS layout tools
More free tools from My Panda Toolbox.

GRIDCSS Grid Template BuilderGrid layouts.
AREACSS Grid Area NamerNamed areas.
CQCSS Container Query GeneratorContainer queries.
FOCUSCSS Focus Ring GeneratorFocus styles.