CSS Subgrid Layouts Are Here!

In this video, we'll explore together how to use CSS Subgrid for a popular layout: a newsletter sign-up form where everything aligns side by side, and the submit button lines up perfectly with the input fields. This setup can get a bit tricky, especially with the addition of labels and changing help text for the input fields.
Previously, achieving such layouts often required JavaScript. But now, thanks to the wider support for "subgrid," it's become much simpler to accomplish without any JavaScript. Join me in this video to discover how to leverage this fantastic CSS Grid feature for your projects.
CodePen: codepen.io/dmtrmrv/pen/ZEPNxjV
Chapters
00:00 - Intro
00:32 - Keeping Form Control and Newsletter Form Separate
01:20 - Building the Layout
03:04 - Using 'auto' for Grid Widths Where Appropriate
03:53 - Encountering Issues
04:10 - Enter Subgrid
06:06 - Making Final Adjustments
07:26 - Keeping Form Control intact
08:07 - Et Voilà!
08:10 - Demonstrating Robustness
09:00 - Conclusion

[@KOBE42__]

Just want to make another comment to say I feel I’m learning a lot already after watching just a couple of your videos! Your approach to web development is excellent, demonstrating scalability and maintainability which just shows your level of expertise - I look forward to learning more from you and watching this channel grow 👌

[@dmtrmrv]

Thank you for the kind words! Means a lot!

[@konana7840]

Very useful example! I love the way you explain all of this in a simple way, keep it up!

[@dmtrmrv]

Thank you, this means a lot! Glad you liked the video.

[@SrinivasBuddha69]

Thanks for the clear explanation of CSS Subgrids. Helpful.

[@dmtrmrv]

Thank you for your comment; you're very welcome! I'm glad you found it helpful!

[@Allformyequine]

This is a great example of using Subgrid and probably the one I've been waiting for! I have found subgrid hard to wrap my head around so this is appreciated!

[@dmtrmrv]

@Allformyequine Thank you! Glad you found the video helpful. You can't imagine how many times I left a comment like this in my projects: /* To do: refactor when subgrid is available. */ So happy it's finally well-supported.

[@AnthonyNevo]

Great video! There is a clear explanation, and the quality is perfect.

[@dmtrmrv]

Thank you, Anthony!

[@_kovshenin]

CSS has come a long way.

[@dmtrmrv]

It has! I remember writing JS to build layouts like this. Still waiting on masonry though.

[@pegak]

Would love to see this solved in Tailwind. 😊

[@dmtrmrv]

Thank you! Currently, there are no plans for utility-first content, but who knows? Maybe in the future.

[@talatkuyuk6556]

Thank you, I appreciate your explanation.

[@dmtrmrv]

You are welcome! This was more me being excited about the fact that Subgrid now has a wide support. I think I'll do another general video on the use of subgrids.

[@Nusamaxa]

Great Video! Do you think mobile first is still important? Internet is so fast, the difference is not much in real life noh?

[@dmtrmrv]

@Nusamaxa I believe it is the majority of times, but the real answer, like many things in web development, is "It depends." I think I'll make the next video about it, it's a great and important topic. Stay tuned.