У меня проблемы с форматированием формы, используя сетку CSS

Question

Я пытаюсь расположить форму в 2 столбца HTML, используя сетку CSS.

В первом столбце я размещаю метки, по одному в каждой строке. Во втором столбце я размещаю элементы формы, по одному в каждой строке.

Это мой первый вопрос, и я довольно новичок в CSS и HTML. Может ли кто-нибудь указать мне на то, что я неправильно понял? Это будет с благодарностью. Спасибо.

Это CSS, тогда HTML, у меня есть за форму.

@media screen and (min-width: 600px) {
      form {justify-self: start;
            max-width: 600px;
            display: grid;
            grid-template-columns: 20% 1fr%;
            grid-template-rows: repeat(6, 20%);
            grid-gap: 20px;
            font-family: Arial, Helvetica, sans-serif;
      }

      label[for="menu"] {
            grid-area: 1 / 1 / 1 / 2;
      }

      label[for="bio"] {
            grid-area: 2 / 1 / 2 / 2;
      }

      label[for="name"]{
            grid-area: 3 / 1 / 3 / 2;
      }

      label [for="email"]{
            grid-area: 4 / 1 / 4 / 2;
      }

      .grid5 {
            grid-area: 5 / 1 / 5 / 2;
      }

      .grid6 {
            grid-area: 6 / 1 / 6 / 2;
      }

      select {
            grid-area: 1 / 2 / 1 / 3;
      }

      textarea {
            grid-area: 2 / 2 / 2 / 3;
      }

      #name {
            grid-area: 3 / 2 / 3 / 3;
      }

      #email {
            grid-area: 4 / 2 / 4 / 3;
      }


}

<div class="form">
    <form action="" method="post">
      <div id="grid1"> <label for="menu">Type</label> <select name="pet_name" id="menu">
          <option>Cat</option>
          <option>Dog</option>
          <option>Hamster</option>
          <option>Zebra</option>
          <option>Other</option>
        </select>
      </div>
      <div id="grid2"> <label for="bio">Biography</label> <textarea name="pet_bio" id="bio"></textarea> </div>
      <div id="grid3"> <label for="name">Name</label> <input type="text" id="name" name="pet_name"> </div>
      <div id="grid4"> <label for="email">Owners Email</label> <input id="email" name="pet_owner_email"></div>
      <div id="grid5"> <button type="submit" id="new-pet-submit-button">Create New Pet</button> </div>
      <div id="grid6"> <button type="reset" id="reset">Reset</button></div>

    </form>
  </div>

Answer 1

A CSS Сетка влияет на все объекты только на первом уровне.

Устранение div'ов вокруг элементов формы заставляет ваш CSS код работать.

Вот так:

@media screen and (min-width: 600px) {
      form {justify-self: start;
            max-width: 600px;
            display: grid;
            grid-template-columns: 20% 1fr%;
            grid-template-rows: repeat(6, 20%);
            grid-gap: 20px;
            font-family: Arial, Helvetica, sans-serif;
      }

      label[for="menu"] {
            grid-area: 1 / 1 / 1 / 2;
      }

      label[for="bio"] {
            grid-area: 2 / 1 / 2 / 2;
      }

      label[for="name"]{
            grid-area: 3 / 1 / 3 / 2;
      }

      label [for="email"]{
            grid-area: 4 / 1 / 4 / 2;
      }

      .grid5 {
            grid-area: 5 / 1 / 5 / 2;
      }

      .grid6 {
            grid-area: 6 / 1 / 6 / 2;
      }

      select {
            grid-area: 1 / 2 / 1 / 3;
      }

      textarea {
            grid-area: 2 / 2 / 2 / 3;
      }

      #name {
            grid-area: 3 / 2 / 3 / 3;
      }

      #email {
            grid-area: 4 / 2 / 4 / 3;
      }


}

<div class="form">
   <form action="/pets" method="post">
     <label for="menu">Type</label> <select name="pet_name" id="menu">
         <option>Cat</option>
         <option>Dog</option>
         <option>Hamster</option>
         <option>Zebra</option>
         <option>Other</option>
       </select>
    
     <label for="bio">Biography</label> <textarea name="pet_bio" id="bio"></textarea>
     <label for="name">Name</label> <input type="text" id="name" name="pet_name">
     <label for="email">Owners Email</label> <input id="email" name="pet_owner_email">
     <button type="submit" id="new-pet-submit-button">Create New Pet</button>
      <button type="reset" id="reset">Reset</button>

   </form>
 </div>