Arranging forms and form elements
Another more nuanced use case for both CSS Grid and Flexbox is building forms. Although they work with similar patterns, forms rarely look alike. They can consist of standalone elements, compound elements (e.g., parts of address fields such as street name and number), and elements placed inline, such as radio buttons; they can have extensions, such as icons indicating the type; and often need to be fully responsive.
Arranging a form to be understandable to the user is essential for a good user experience and can tremendously impact the conversion rate. However, we’re not focusing on UX but on DX, the developer experience. So, let’s see how we can use Flexbox and CSS Grid to solve different form-related challenges.
Input groups
The first element we’ll look at is a so-called input group. Bootstrap defines input groups as an extension to any form control with text, icons, or buttons. These are especially useful to indicate...