CSS grid showing label and input in 2 rows in mobile view-CodePudding

I want to create this div contents in the mobile view into a grid/flex so that the label of the email address is on a row and the other div which contains the input under it. i am really confused with the css. what is wrong here?

.form-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-auto-rows: 30px, auto;
    padding: 12px 0 0 0;
  }

<div ><label>Email address</label><div style="width: 100%;"><input type="email" name="email"></div></div>

CodePudding user response：

do you just want to put the input box under the email address label? if so then this should do it

    .form-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-auto-rows: 30px, auto;
    padding: 12px 0 0 0;
  }

<div ><label>Email address</label></div>
<div style="width: 100%;"> <input type="email" name="email"></div>

CodePudding user response：

Just change this line in your css

grid-template-columns: 1fr 2fr; to grid-template-rows: 1fr 1fr;

CodePudding user response：

Use media queries: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries

just try to change the screen size to notice changes

.form-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-auto-rows: 30px, auto;
    padding: 12px 0 0 0;
 }
 
                 /*screen size*/
@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

<div ><label>Email address</label><div style="width: 100%;"><input type="email" name="email"></div></div>