I tried the solution with mixmax(0, 1fr) too but the input field doesn't seem to adapt its width to the grid container. At around 430px width in the browser responsive mode, it starts to overflow the grid container.

I don't want to hard-code the width.

Could some one please help me fix and explain this behavior to me?

.form_container {
  background-color: white;
  padding: 1rem;
}
.form_container .register_1 {
  display: grid;
  grid-template-columns: 5% 1fr 5%;
  grid-template-rows: repeat(5, 2rem);
  row-gap: 0.5rem;
  background-color: blue;
  border-radius: 1rem;
}
.form_container .register_1 div {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: 1rem;
  place-items: center;
}
.form_container .register_1 div label {
  color: white;
  font-weight: 400;
  place-self: center end;
}
.form_container .register_1 div input {
  border-radius: 1rem;
  border: none;
  padding: 1em;
  font-family: "Poppins", sans-serif;
  height: calc(1.4 * 1rem);
}
.form_container .register_1 .submit_button {
  width: 80%;
  place-self: end;
}
.form_container .register_1 .submit_button a {
  margin-top: 1rem;
  color: white;
  text-decoration: none;
  border: 0.1em solid white;
  text-align: center;
  border-radius: 0.4em;
  padding: 0.2em 1em;
  font-weight: 400;
}

<div >
    <form  action="">

        <div >
            <label for="username">Username</label>
            <input type="text" name="username" placeholder="Username">
        </div>

        <div >
            <label for="fname">Full Name</label>
            <input type="text" name="fname">
        </div>

        <div >
            <label for="email">Email</label>
            <input type="text" name="email">
        </div>

        <div >
            <label for="username">Password</label>
            <input type="password" name="username">
        </div>

        <div >
            <label for="confirm_password">Confirm Password</label>
            <input type="password" name="confirm_password">
        </div>

        <div >
            <a href="/" name="submit">Save</a>            
        </div>

    </form>
</div>

CodePudding user response：

You have a typing error. I think it will work properly when you remove or fix it. I guess thats the font-family.

At line 29:

.form_container{
            background-color: white;
            padding: 1rem;

            .register_1{
                display: grid;
                grid-template-columns: 5% 1fr 5%;
                grid-template-rows: repeat(5, 2rem);
                row-gap: 0.5rem;
                background-color: blue;
                border-radius: 1rem;
        
                div{
                    grid-column: 2;
                    display: grid;
                    grid-template-columns: 1fr 2fr;
                    column-gap: 1rem;
                    place-items: center;
    
                    label{
                        color: white;
                        font-weight: 400;
                        place-self: center end;
                    }
        
                    input{
                        border-radius: 1rem;
                        border: none;
                        padding: 1em;'Poppins', sans-serif; // HERE !!!
                        height: calc(1.4 * 1rem);
                    }
                }
    
                .submit_button{
                    width: 80%;
                    place-self: end;
                    
                    a{
                        margin-top: 1rem;
                        color: white;
                        text-decoration: none;
                        border: 0.1em solid white;
                        text-align: center;
                        border-radius: 0.4em;
                        padding: 0.2em 1em;
                        font-weight: 400;
                    }
                }
            }
        }  

CodePudding user response：

Ok fixed it by giving the input element a width of 100%;