A while back, Dave Rupert wrote a neat post on some of the subtle issues with CSS Grid. The Big Kahuna is, CSS Grid doesn’t play nice with <input>s (for now I suppose). Long-story-short, I recently had a quick project involving a web-form and CSS Grid. As Puzzling and as frustrating as it was to hack a solution — I came up short. Enter Rupert’s FitGrid™️! It’s was a real lifesaver. So thanks, Dave!
I just thought it might be useful to share FitGrid in its entirety for posterity. It’s basically a small set of CSS Resets for all of CSS Grid’s form problemos. Enjoy!
/*
_______ ___ _______ _______ ______ ___ ______
| || | | | | || _ | | | | |
| ___|| | |_ _| | ___|| | || | | | _ |
| |___ | | | | | | __ | |_||_ | | | | | |
| ___|| | | | | || || __ || | | |_| |
| | | | | | | |_| || | | || | | |
|___| |___| |___| |_______||___| |_||___| |______|
by Dave Rupert
Read More: https://daverupert.com/2017/09/breaking-the-grid/
*/
/*
* Remove `min-width: auto` from Grid Items
* Fixes overflow-x items.
*/
.fit-grid > * { min-width: 0; }
/* Apply max-width to Replaced Elements and Form controls */
.fit-grid img,
.fit-grid video,
.fit-grid audio,
.fit-grid canvas,
.fit-grid input,
.fit-grid select,
.fit-grid button,
.fit-grid progress { max-width: 100%; }
/* Make file and submit inputs text-wrap */
.fit-grid input[type="file"],
.fit-grid input[type="submit"] { white-space: pre-wrap; }
/* Fix Progress and Range Inputs */
.fit-grid progress,
.fit-grid input[type="range"] { width: 100%; }
/* Fix Number Inputs in Firefox */
@supports (--moz-appearance: none) {
.fit-grid input[type="number"] { width: 100%; }
}