CSS Grid Layout: 5 Practical Projects

Chapter 5: Make Forms Great with CSS Grid

by Craig Buckler

Form design is a fundamental yet frustrating part of web design and development. Ask anyone who's ever tried to style a <select> box or align a label consistently in all browsers.

In 2016, I wrote Make Forms Fun with Flexbox which identified how several form difficulties could be solved with Flexbox. A key benefit was HTML source order consistency with the <label> always following its associated field tag in a container:

<div> <input id="name" name="name" type="text" /> <label for="name">name</label> </div> <div> <select id="experience" name="experience"><!-- options --></select> <label for="experience">experience</label> </div> <div> <input id="html" name="html" type="checkbox" /> <label ...