Form with top labels works but not with side labels

Question

This works:

* {
  box-sizing: border-box;
}

.parent {
  display: grid;
  /* grid-template-areas: 
  "contact comments"
  "... button";*/
  grid-template-rows: 12em;
  grid-template-columns: 12em;
  grid-gap: .8em;
  background: yellow; // for debugging
  padding: 0;
}

.lp {
  // label properties
  padding: 0.4em; //1.1em
  background-color: cyan;
}

.ip {
  // input properties
  padding: 0.4em; //1.1em
  margin-bottom: 1.5em;
  background-color: lightyellow;
}

// maps areas to markup elements
.lnam { grid-area: 1/1; } // label Name area -> label elem
.inam { grid-area: 2/1; } // input Name area -> input elem 
.leml { grid-area: 3/1; } // ditto for Email
.ieml { grid-area: 4/1; }

.ltel { grid-area: 5 / 1; } // and Telephone

.itel { grid-area: 6/1; }

<form class="parent">
  <div>
    <label class="lp lnam" for="name">Name</label>
    <input class="ip inam" type="text" id="name" required>
    <label class="lp leml" for="email">Email</label>
    <input class="ip ieml" type="text" id="email" required>
    <label class="lp ltel" for="tph">Phone</label>
    <input class="ip itel" type="text" id="tph" required>
  </div>
</form>

but could not get side labels to work. The input element is placed below the label, but it should follow the label on the same row. The code below is nearly the same as the code that is working above with identical markup. Differences: grid-area specs and grid-template-columns (two columns for side labels)

* {
  box-sizing: border-box;
}

.parent {
  display: grid;
  /* grid-template-areas: 
  "contact comments"
  "... button";*/
  grid-template-rows: 4em;
  grid-template-columns: 150px 200px;
  grid-gap: .8em;
  background: yellow;
  padding: 0;
}

.lp {
  padding: 0.4em; //1.1em
  //border: 1px solid blue;
  background-color: cyan;
}

.ip {
  padding: 0.4em; //1.1em
  //border: 1px solid blue;
  margin-bottom: 1.5em;
  background-color: lightgreen;
}

.lnam {
  grid-area: 1/1 /2/2;
} // area -> element

.inam {
  grid-area: 1/2 /2/3;
}

/* .leml { grid-area: 3/11; }
.ieml { grid-area: 4/1; }
.ltel { grid-area: 5/1; }
.itel { grid-area: 6/1; } */

<form class="parent">
  <div>
    <label class="lp lnam" for="name">Name</label>
    <input class="ip inam" type="text" id="name" required>
    <!--<label class="lp leml" for="email">Email</label>
<input class="ip ieml" type="text" id="email" required>
<label class="lp ltel" for="tph">Phone</label>
<input class="ip itel" type="text" id="tph" required>-->
  </div>
</form>

I used both Firefox and Chrome and got identical results. What am I doing wrong?

Answer 1

You should remember that grid items are only direct children of grid container, not all descendants. So changed selector .parent to parent > div to make it work and removed grid-area properties because grid items will align automatically even without this properties.

I assume you want label column to take width by content and textboxes to take all remaining width. Also I think that you don't want your grid tracks to be 12em height. So I changed grid-template-columns and removed grid-temaplate-rows.

Demo of result:

* {
  box-sizing: border-box;
}

.parent > div {
  display: grid;
  /* grid-template-areas: 
  "contact comments"
  "... button";*/
  grid-template-columns: auto 1fr;
  grid-gap: .8em;
  background: yellow; // for debugging
  padding: 0;
}

.lp {
  // label properties
  padding: 0.4em; //1.1em
  background-color: cyan;
}

.ip {
  // input properties
  padding: 0.4em; //1.1em
  margin-bottom: 1.5em;
  background-color: lightyellow;
}

<form class="parent">
  <div>
    <label class="lp lnam" for="name">Name</label>
    <input class="ip inam" type="text" id="name" required>
    <label class="lp leml" for="email">Email</label>
    <input class="ip ieml" type="text" id="email" required>
    <label class="lp ltel" for="tph">Phone</label>
    <input class="ip itel" type="text" id="tph" required>
  </div>
</form>