title: CSS Grid layout changes input width using a form
body: <p>I'm trying to design a responsive form using CSS Grid but the input width changes to like 1 col when I start typing any information</p>
  
  <p>This is the CSS:</p>
  
  <pre><code>.cftv_representante_form {
      background-color: rgb(82, 82, 82);
      color: #fff;
  }
  .cftv_representante_form {
      display: grid;
      grid-auto-columns: auto;
      grid-auto-rows: auto auto auto auto auto auto auto auto auto auto auto;
      grid-template-areas: "h1" "p" "nome1" "nome2" "email1" "email2" "cpf1" "cpf2" "telefone1" "telefone2" "botao"
  }
  .cftv_representante_form p {
      padding: 5px 0 30px 0;
  }
  .cftv_representante_form input {
      font-size: 1.5em; 
      border-radius: 15px; 
      width: 100% !important;  
      color: #000; 
      border: 1px solid rgba(255,255,255,0.3); 
      margin-top:10px;
      margin-bottom: 10px; 
      padding: 10px;
  }
  
  @media screen and (min-width: 540px) {
      .cftv_representante_form {
          display:grid;
          grid-auto-columns: auto 15px auto !important;
          grid-auto-rows: auto auto auto auto auto auto auto !important;
          grid-template-areas: "h1 h1 h1" "p p p" "nome1 nome1 nome1" "nome2 nome2 nome2" "email1 email1 email1" "email2 email2 email2" "cpf1 . telefone1" "cpf2 . telefone2" "botao botao botao" !important;
      }
  }
  </code></pre>
  
  <p>This is the HTML:</p>
  
  <pre><code>        &lt;form method="get" action="cftv_captar.asp"&gt;
              &lt;div class="artigo cftv_representante cftv_representante_form"&gt;
  
                      &lt;h1 style="grid-area: h1"&gt;Seja um de nossos representantes:&lt;/h1&gt;
                      &lt;p style="grid-area: p"&gt;&lt;i style="color:#a0c402;"&gt;Todos os campos abaixo são obrigatórios&lt;/i&gt;&lt;/p&gt;
                      &lt;label style="grid-area: nome1"&gt;Nome completo:&lt;/label&gt;
                      &lt;input style="grid-area: nome2" type="text" name="txtNome" id="txtNome" placeholder="Nome Sobrenome" maxlength="100" required /&gt;
                      &lt;label style="grid-area: email1"&gt;E-mail:&lt;/label&gt;
                      &lt;input style="grid-area: email2" type="text" name="txtEmail" id="txtEmail" placeholder="nome@dominio.com.br" maxlength="80" required /&gt;
                      &lt;label style="grid-area: cpf1"&gt;CPF:&lt;/label&gt;
                      &lt;input style="grid-area: cpf2" type="text" name="txtCPF" id="txtCPF" placeholder="___.___.___-__" maxlength="14" required /&gt;
                      &lt;label style="grid-area: telefone1"&gt;Telefone celular:&lt;/label&gt;
                      &lt;input style="grid-area: telefone2" type="text" name="txtCelular" id="txtCelular" placeholder="(__)_____-____" maxlength="15" required /&gt;
                      &lt;input style="grid-area: botao" class="cftv_btn_envia_representante" type="submit" value="Enviar"&gt;  
  
              &lt;/div&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p>This is how it's displayed:</p>
  
  <p><img src="https://i.stack.imgur.com/a9Slu.png" alt="enter image description here"></p>
  
  <p>But then, when the cursor goes into the first input, this is what happens with the input width:</p>
  
  <p><img src="https://i.stack.imgur.com/NBB7h.png" alt="enter image description here"></p>
  
  <p>What happened to the first input happens to all the other inputs.</p>
  
  <p>If I change the HTML for this one below, the problem doesn't happen but the layout also doesn't work with the grid as the CSS is applied to the <code>&lt;div&gt;</code> and not to the <code>&lt;form&gt;</code>:</p>
  
  <pre><code>&lt;div class="artigo cftv_representante cftv_representante_form"&gt;
                  &lt;form method="get" action="cftv_captar.asp"&gt;
                      &lt;h1 style="grid-area: h1"&gt;Seja um de nossos representantes:&lt;/h1&gt;
                      &lt;p style="grid-area: p"&gt;&lt;i style="color:#a0c402;"&gt;Todos os campos abaixo são obrigatórios&lt;/i&gt;&lt;/p&gt;
                      &lt;label style="grid-area: nome1"&gt;Nome completo:&lt;/label&gt;
                      &lt;input style="grid-area: nome2" type="text" name="txtNome" id="txtNome" placeholder="Nome Sobrenome" maxlength="100" required /&gt;
                      &lt;label style="grid-area: email1"&gt;E-mail:&lt;/label&gt;
                      &lt;input style="grid-area: email2" type="text" name="txtEmail" id="txtEmail" placeholder="nome@dominio.com.br" maxlength="80" required /&gt;
                      &lt;label style="grid-area: cpf1"&gt;CPF:&lt;/label&gt;
                      &lt;input style="grid-area: cpf2" type="text" name="txtCPF" id="txtCPF" placeholder="___.___.___-__" maxlength="14" required /&gt;
                      &lt;label style="grid-area: telefone1"&gt;Telefone celular:&lt;/label&gt;
                      &lt;input style="grid-area: telefone2" type="text" name="txtCelular" id="txtCelular" placeholder="(__)_____-____" maxlength="15" required /&gt;
                      &lt;input style="grid-area: botao" class="cftv_btn_envia_representante" type="submit" value="Enviar"&gt;  
                  &lt;/form&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>I have tried to apply the CSS layout to the <code>&lt;form&gt;</code> and several other small attempts but with no success.</p>
  
  <p>Do you guys know if there's any CSS characteristic I can apply to the <code>&lt;form&gt;</code> so it doesn't get in the way?</p>