HTML Grid Columns with Input elements

Assume we need a Label and an Input element like this:

The label content is "Label" and the input element value is "This is the default text value". These two elements are both contained in one container (e.g. a div element) with this styling:

We notice that the text content is not auto-expanding to show all text, when we change the 2nd column fr units of the grid. The text remains cut-off.

Solution

Because the input component is in column 2 of the grid, it's width needs to be set to 100% of that column in order to follow grid column fr changes.

Indeed we can now control the input width based only on the grid fr units as shown here:

The change to the fr units was this:

Now we see that the input element width is 7 times wider than the first column containing the label element. All made possible by a width of 100% on the input element.

Take Away

The grid cells themselves act as a container. Widths and Heights are relative to the cell. The limits of the cell can be overrun using numeric widths and heights, but using percentages keeps the element in the cell bounds.

This post was specific to an input element but any element in any columns needs to be 100% of that column if we want the fr units to control the width or height in a 1 to 1 ratio. No margins or padding are needed if we chose the fr units wisely.

JWP2020