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.
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.
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.
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...
These mini-series are absolutely fantastic! Wonderfully executed and very informative.
Agree, I love everything Miriam does.
wow this is so nice. Formatting forms can be a nightmare the old way and this is so easy formatted and clean to read.
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.
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.
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.
Very interesting. I'll try it out
I really like your editor theme such as attribute name is in a different font, how did you do that?
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...
why did you use pann for the label text insted of just witing the text using the label tag, what's the benefit ?
excellent
wouldn't
label { display:contents }
also solve problem without subgrid?
Fantastic!
Subgrid in safari will prob be out in 2022
You were completely correct (September 2022) and it still managed to ship before Chrome.
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.
March 2023. Edge and Chrome still not there.
Couldn’t you also achieve something similar by setting the .field to display: contents;? Inside a @supports not(grid-template-columns: subgrid)?
Mozilla Developer thanks for the reply! I didn’t know about those potential accessibility concerns
Subgrid should have been shipped with Grid together.
change the name of the channel to "cristo computer" pls
No, no, no. No. Nope. Find another way to troll for attention.
is this a dude or female?
Obviously transgender