Not sure if this is the best way as I’ve not done much with grid, and I just quickly did a Qwant search to find some info.
You could try overflow-wrap: anywhere; in your form styles, or not hard code specific widths. Could you use min-width and max-width? I’m not sure how overflow-wrap will affect your layout.
@media screen and (max-width: 650px)
Because the width from 0px. up to 650px. the media query is applied. Max is short for maximum.
I think your content is running out of room. Under 650px. you should switch to a single column layout. Labels on top of inputs. Questions on top for buttons and checkboxes.
I don’t know enough about grid yet. Would it be about defining and placing grid areas? If you think of your grid as a collection of rows instead of two columns does it change the way you build it?
Before CSS grid, columns were an illusion. Everything was actually rows with neatly aligned parts.
So, in your use case, it would have been row1 left-hand side / row1 right-hand side.
For the two column look it would be display:inline-block;
For a single column it would be display:block;
In Flexbox each row is a flex container and the flex-direction is changed from row to column
I wanted to see if I can do this using grids, responsive grids. For computer screens it’s not bad, but for mobile screens, even if I switch the grid to a column layout, the cells of the grid and its content keep sticking out. I don’t know why it’s behaving that way.
In your media query for small screens .wide needs to change. .wide is creating to much white space left of the input. Use developer tools. It outlined the space around the input for me.