title: CSS Grid for layout a form
body: <p>I try to figure it out if there any easy way to layout this form by usgin css grid or css flexbox system or anything else</p>
  
  <p><a href="https://i.stack.imgur.com/kylle.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kylle.png" alt="Layout that I try to make"></a></p>
  
  <p>Here's my code doing in my own way but It seems too complicate</p>
  
  <pre><code>&lt;form class="contactus__content1__box__form"&gt;
                          &lt;div class="contactus__content1__box__form__line1"&gt;
                          &lt;label class="contactus__content1__box__form__line1__label" style={{ display : 'block' }} &gt;Name:  &lt;/label&gt;
                          &lt;input class="contactus__content1__box__form__line1__input" type="text" name="name" /&gt;
                          &lt;/div&gt;
  
                          &lt;div class="contactus__content1__box__form__line2"&gt;
                          &lt;label class="contactus__content1__box__form__line2__label"style={{}} &gt;Email:  &lt;/label&gt;
                          &lt;input class="contactus__content1__box__form__line2__input"  type="text" name="name" /&gt;
                          &lt;/div&gt;
  
                          &lt;div class="contactus__content1__box__form__line2"&gt;
                          &lt;label class="contactus__content1__box__form__line2__label"style={{}} &gt;Tel No.:  &lt;/label&gt;
                          &lt;input class="contactus__content1__box__form__line2__input"  type="text" name="name" /&gt;
                          &lt;/div&gt;
  
                          &lt;div class="contactus__content1__box__form__line3"&gt;
                              &lt;label class="contactus__content1__box__form__line3__label" style={{ display : 'block' }} &gt;Subject:  &lt;/label&gt;
                              &lt;input class="contactus__content1__box__form__line3__input"   type="text" name="name" /&gt;
                          &lt;/div&gt;
  
                          &lt;div class="contactus__content1__box__form__line4"&gt;
                              &lt;label class="contactus__content1__box__form__line4__label" style={{ display : 'block' }} &gt;Message:  &lt;/label&gt;
                              &lt;input class="contactus__content1__box__form__line4__input" style={{}} type="text" name="name" /&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
  </code></pre>
  
  <p>here's css which apply cssgrid</p>
  
  <pre><code>&amp;__form{
                  display:grid;
                  grid-template-columns: 1fr 1fr;
                  grid-template-rows:  min-content min-content min-content min-content min-content;
                  align-items: center;
                  &amp;__line1{
                      grid-column: 1/3;
                      margin-bottom: 15px;
                      &amp;__label{           
                      }
                      &amp;__input{
                          width: 95%;
                      }
                  }
                  &amp;__line2{
                      margin-bottom: 15px;
                      &amp;__label{
  
                      }
                      &amp;__input{
                          width: 90%;
                      }
                  }
                  &amp;__line3{
                      grid-column: 1/3;
                      grid-row: 3/4;
                      margin-bottom: 15px;
                      &amp;__label{
                      }
                      &amp;__input{
                          width: 95%;
                      }
                  }
                  &amp;__line4{
                      grid-column: 1/  3;
                      grid-row:4/5;
                      margin-bottom: 15px;
  
                      &amp;__label{
                      }
                      &amp;__input{
                          // margin-left: 300px;
                          width: 95%;
                          line-height: 80px;
                      }
                  }
              }
  </code></pre>
  
  <p>As you see I need to declare grid-column , grid-row for each line (input + label) so It take too much effort for this simple from if there any more straightforward way please let me know</p>