CSS Grid Form

CSS grid has been in mainstream browsers since the middle half of 2017. Currently it is supported in about 77% of the browsers. It is supported by Microsoft Edge, Firefox, Chrome and Safari. It's not supported in Opera Mini but works perfectly fine in Opera. UC browser for Android is another problem. The problem browsers are older mobile browsers, so a simple fallback should take care of them.

The promise of CSS was to separate the content from the layout. CSS layouts killed the old table based layouts that were a semantic nightmare. Now, CSS floats and flexbox make the job a lot better. But they are still a way off the holy grail of semantic markup and CSS.

Bootstrap does a great job but it can be improved. I've used and example of a simple contact form. One done using Bootstrap 4 and the other using plain HTML and CSS grid for the layout.

Bootstrap 4 HTML

Note that each row is wrapped in a div element. Each input is also wrapped in a div. This allows us to

The End Result

The end result still needs some work. The fonts and input areas aren't as nice as the bootstrap version but that can be fixed with a few more tweaks to the code. Laying out a sematic form with no div wraps.

The bootstrap version contains 8899 lines of CSS. The grid version is 15 lines. To be fair, bootstrap does a lot more than lay out a form. It is responsive and has been thoroughly tested. It is the result of 1,000's of hours of work.

The grid version only needs 9 lines of html to display the form. The bootstrap version took more than twice the amount of HTML to achieve the same aim.