Tweak size of input helpers, based on column sizes

* Use the largest grid container as a starting point, at smaller widths inputs will be constrained by their containers
* Take into account the gutter width of any wrapping grid element, so that inputs within grids and outside of grids are the same size
* Update the style guide to show examples of inputs in grids
* Rename mixin to be specific to inputs