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. Subgrid will be available in Firefox 71, 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!
Demo: codepen.io/mir...
#subgrid #CSSGrid #miriamsuzanne

[@HazimSami]

These mini-series are absolutely fantastic! Wonderfully executed and very informative.

[@frozen_tortus]

Agree, I love everything Miriam does.

[@Avean]

wow this is so nice. Formatting forms can be a nightmare the old way and this is so easy formatted and clean to read.

[@MovieHeretic]

Thanks for the clear example of using subgrid. Was unaware of this option which just cut out ten or so lines of css from our form definitions, loved the fallback as well.

[@gilbertsenyonjo963]

Very interesting. I'll try it out

[@VicZ582]

I really like your editor theme such as attribute name is in a different font, how did you do that?

[@PaulMcCannWebBuilder]

Nice to know. I realize the example is for the demo, but I'd probably resort to putting the label and input elements side by side, rather than nest them. Also as a side note: the fieldset element triggers a bug in Chrome and grid doesn't work on it at all for some some reason.

[@PavelSatrapa]

Putting them side by side was my idea too when I saw the video. Using label for=... instead of nesting input into label leads to simpler HTML (no need for nested span any more) and simpler CSS (no need for inheriting grid features and subgrid). I think this is a bad example.

[@rossgeography]

excellent

[@mateusvahl5072]

Fantastic!

[@supergodinez1350]

why did you use pann for the label text insted of just witing the text using the label tag, what's the benefit ?

[@reknaanker4220]

wouldn't
label { display:contents }
also solve problem without subgrid?

[@MarcHaunschild]

I really love this short explanations of a single css use case or property. But It'd like to add a warning for this particular one: because of accessibility and usability reasons you should place labels on the left top of the input field... - so maybe forms are not the best example for sub grids...

[@whiterabbit7446]

Do you really need the CSS inside the form {...} block? I don't think it does anything except the grid-column-gap and margin-bottom.

[@datmanUK]

Subgrid in safari will prob be out in 2022

[@porglezomp7235]

You were completely correct (September 2022) and it still managed to ship before Chrome.

[@emberchord]

Couldn’t you also achieve something similar by setting the .field to display: contents;? Inside a @supports not(grid-template-columns: subgrid)?

[@emberchord]

Mozilla Developer thanks for the reply! I didn’t know about those potential accessibility concerns

[@aram5642]

March 2023. Edge and Chrome still not there.

[@LordDursh]

change the name of the channel to "cristo computer" pls

[@tfsoa]

Subgrid should have been shipped with Grid together.

[@JohnSmith-op7ls]

No, no, no. No. Nope. Find another way to troll for attention.

[@starmountpictures]

is this a dude or female?

[@leotodosiev8513]

Obviously transgender