stephen.news

hypertext, words and more

Dave Rupert’s CSS Grid Resets (FitGrid)

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%; }
}