Laying out Forms using Subgrid

It’s a common pattern to align form labels and inputs in grid-like layout. I’ll show you how to do it quickly using CSS subgrid, with several quick fallbacks.

Part of a series tagged 'mozilla developer'

Styling Lists in CSS – October 1, 2019
Why is CSS so Weird? – October 3, 2019
What does <code>revert</code> do in CSS? – October 9, 2019
Faster Layouts with CSS Grid – October 14, 2019
Subgrid for Better Card Layouts – October 15, 2019
Laying out Forms using Subgrid – October 16, 2019
Why isn’t this CSS doing anything? – October 21, 2019
Inner & Outer Values of the Display Property – October 28, 2019
Scroll Snap in CSS – October 31, 2019
How do you wrap long words in CSS? – November 6, 2019
Use new selectors responsibly with selector queries – November 20, 2019

Subgrid will be available in Firefox 71 (Dec 3), and you can use it already in Firefox Nightly – but there’s no need to wait. Subgrid works great as a quick enhancement on top of you existing layouts!

Dont wait for full browser support to start using subgrids