Use CSS to create a full width input and button control

2020-02-03

CSS grid makes it almost trivial to create a full width box which squeezes just enough space away from an input field to place a button in at the end. The CSS doing the work creating the style above is:

.full-width-button-and-input-control {
  display: grid;
  column-gap: .5em; /* puts a bit of space between the input and button */
  grid-template-columns: auto max-content;
}

The last property, grid-template-columns, uses the value max-content to set the width of the column wrapping the button to be the full width of the button being as wide as it needs to be to display the text on one line. One alternative would be to set it to min-content. However, this means squeeze the content as much as possible. In this case, this would mean that a line break is used between the two words in the button to make it narrower.

I find that, for buttons that only have one or two words, using max-content as the grid-template-columns value produces desired effect.