Subgrid Forms

:: Mozilla Developer https://www.youtube.com/watch?v=gmQlK3kRft4

by Snj

HTML

<h1>Subgrid Forms</h1>

<form action="">
  <label for="name" class="field">
    <span class="label-text">Full long name</span>
    <input tyoe="text" id="name">
  </label>
  <label for="email" class="field">
    <span class="label-text">Email</span>
    <input type="email" id="email">
  </label>
  <label for="message" class="field">
    <span class="labek-text">Longer</span>
    <textarea name="" id="message"></textarea>
  </label>
  <button>Send</button>
</form>

CSS

body {background-color: #eeee; padding: 0rem 1rem 1rem 1rem;}

form {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-column-gap: 1em;
  margin-bottom: 0.2em;    
}

.field {
  grid-column: span 2;
  display: grid;
  grid: inherit;
  grid-template-columns: subgrid;
  /* grid-template-columns: 6em 1fr; */
  grid-gap: inherit;
}
label {
  margin-bottom: inherit;
}