CSS Grid для макета формы

Question

Я пытаюсь выяснить, есть ли простой способ размещения этой формы с помощью usgin css grid или css flexbox system или чего-либо еще

Вот мой код, работающий по-своему, но он кажется слишком сложным

<form class="contactus__content1__box__form">
                        <div class="contactus__content1__box__form__line1">
                        <label class="contactus__content1__box__form__line1__label" style={{ display : 'block' }} >Name:  </label>
                        <input class="contactus__content1__box__form__line1__input" type="text" name="name" />
                        </div>

                        <div class="contactus__content1__box__form__line2">
                        <label class="contactus__content1__box__form__line2__label"style={{}} >Email:  </label>
                        <input class="contactus__content1__box__form__line2__input"  type="text" name="name" />
                        </div>

                        <div class="contactus__content1__box__form__line2">
                        <label class="contactus__content1__box__form__line2__label"style={{}} >Tel No.:  </label>
                        <input class="contactus__content1__box__form__line2__input"  type="text" name="name" />
                        </div>

                        <div class="contactus__content1__box__form__line3">
                            <label class="contactus__content1__box__form__line3__label" style={{ display : 'block' }} >Subject:  </label>
                            <input class="contactus__content1__box__form__line3__input"   type="text" name="name" />
                        </div>

                        <div class="contactus__content1__box__form__line4">
                            <label class="contactus__content1__box__form__line4__label" style={{ display : 'block' }} >Message:  </label>
                            <input class="contactus__content1__box__form__line4__input" style={{}} type="text" name="name" />
                        </div>
                    </form>

вот css, который применяет cssgrid

&__form{
                display:grid;
                grid-template-columns: 1fr 1fr;
                grid-template-rows:  min-content min-content min-content min-content min-content;
                align-items: center;
                &__line1{
                    grid-column: 1/3;
                    margin-bottom: 15px;
                    &__label{           
                    }
                    &__input{
                        width: 95%;
                    }
                }
                &__line2{
                    margin-bottom: 15px;
                    &__label{

                    }
                    &__input{
                        width: 90%;
                    }
                }
                &__line3{
                    grid-column: 1/3;
                    grid-row: 3/4;
                    margin-bottom: 15px;
                    &__label{
                    }
                    &__input{
                        width: 95%;
                    }
                }
                &__line4{
                    grid-column: 1/  3;
                    grid-row:4/5;
                    margin-bottom: 15px;

                    &__label{
                    }
                    &__input{
                        // margin-left: 300px;
                        width: 95%;
                        line-height: 80px;
                    }
                }
            }

Как вы видите, мне нужно объявить grid-столбец, grid-строку для каждой строки (input + label), поэтому для этого простого процесса потребуется слишком много усилий, если есть более простой способ, пожалуйста, дайте мне знать

Answer 1

Пожалуйста, смотрите мое решение ниже. Я использовал css-grid для настройки вашей формы и сделал ее удобной для мобильных устройств.

Я также упростил имена ваших классов - вы можете переименовывать их по своему усмотрению.

JSbin ссылка: https://jsbin.com/sedamij/edit?html,css,output

HTML

<main class="contact-us-page">
  <div class="contact-us-wrapper">
    <h1 class="contact-us-title">SEND US AN EMAIL</h1>
    <h2 class="contact-us-subtitle">GET IN TOUCH WITH US</h2>
    <form action="index.html" class="contact-us-form">
      <label for="name">Name:*</label>
      <input type="text" id="name" required></input>
      <label for="contact-email">Email:*</label>
      <input type="email" id="contact-email" required></input>
      <label for="contact-tel">Tel:*</label>
      <input type="tel" id="contact-tel" required></input>
      <label for="subject">Subject:*</label>
      <input type="text" id="subject" required></input>
      <label for="message">Message:*</label>
      <textarea id="message" rows="15" id="message"></textarea>

      <button type="submit" class="button">SEND</button>
    </form>
  </div>
</main>

CSS

main {
    padding-top: 1rem;
}

.contact-us-wrapper {
    max-width: 51rem;
    margin: 0 auto;
}

.contact-us-title {
    font-size: 1.5rem;
    color: #E46E00;
    margin-bottom: 0.2rem;

}

.contact-us-subtitle {
    color: gray;
    font-size: 1.3rem;
    margin-top: 0;
}

.contact-us-form {
    padding: 1rem;
    display: grid;
    grid-auto-rows: 2rem;
    grid-row-gap: 0.5rem;

}

.contact-us-form label {
    font-weight: bold;
}

.contact-us-form label,
.contact-us-form input {
    display: block;
    width: 100%;
}

.contact-us-form input:focus {
    outline: none;
    background: #ece7e7;
    border-color: #2ddf5c;
}

.contact-us-form button[type="submit"] {
    display: block;
    background-color: #E46E00;
    color: white;

}

.contact-us-form input.invalid,
.contact-us-form select.invalid,
.contact-us-form.needs-validation :invalid {
    border: 1px solid red !important;
    background-color: #ff8e8e
}

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

#name {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
}

label[for="contact-email"] {
    grid-row: 3 / 4;
}

#contact-email {
    grid-row: 4 / 5;
}

label[for="contact-tel"] {
    grid-row: 5 / 6;
}

#contact-tel {
    grid-row: 6 / 7;
}

label[for="subject"] {
    grid-row: 7 / 8;
}

#subject {
    grid-row: 8 / 9;
}

label[for="message"] {
    grid-row: 9 / 10;
}

#message {
    grid-row: 10/ 15;
}

form button[type="submit"] {
    grid-row: 15 / 16;
}



@media (min-width: 40rem) {
    .contact-us-form {
        margin: auto;
        width: 50rem;
        grid-template-columns: 22rem 22rem;
        grid-column-gap: 1rem;
    }

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

    #name {
        grid-row: 2 / 3;
        grid-column: 1 / 3
    }

    label[for="contact-email"] {
        grid-row: 3 / 4;
        grid-column: 1 / 2
    }

    #contact-email {
        grid-row: 4 / 5;
        grid-column: 1 / 2;
    }

    label[for="contact-tel"] {
        grid-row: 3 / 4;
        grid-column: 2 / 3;
    }

    #contact-tel {
        grid-row: 4 / 5;
        grid-column: 2 / 3;
    }

    label[for="subject"] {
        grid-row: 5 / 6;
    }

    #subject {
        grid-row: 6 / 7;
        grid-column: 1 / 3;
    }

    label[for="message"] {
        grid-row: 7 / 8;
    }

    #message {
        grid-row: 8 / 13;
        grid-column: 1 / 3;
    }

    form button[type="submit"] {
        grid-row: 14 / 15;
    }

}

Скриншоты:

Answer 2

Я не верю, что это самое элегантное решение, но это первое, что я бросил вместе: я слегка использую Flexbox только для электронной почты и тел. Я думаю, что это немного чище и гибче, но, опять же, вероятно, не идеальное решение. Но я надеюсь, что это поможет.

https://jsfiddle.net/pbyktuLx/1/

form {
  margin: 0 auto;
  width: 50%;
}

label {
  display: block;
}

input,
textarea {
  width: 100%;
}

.form-field-wrapper {
  margin-bottom: 10px;
}

.form-field-wrapper.flex {
  display: flex;
}

.form-field-wrapper.flex>div {
  flex: 1;
  margin-left: 10px;
}

.form-field-wrapper.flex>div:first-child {
  margin-left: 0;
}

<form>
  <div class="form-field-wrapper">
    <label for="name">Name *</label>
    <input type="text" id="name" />
  </div>
  <div class="form-field-wrapper flex">
    <div class="form-field-wrapper">
      <label for="email">Email *</label>
      <input type="text" id="email" />
    </div>
    <div class="form-field-wrapper">
      <label for="tel">Tel *</label>
      <input type="text" id="tel" />
    </div>
  </div>
  <div class="form-field-wrapper">
    <label for="subject">Subject *</label>
    <input type="text" id="subject" />
  </div>
  <div class="form-field-wrapper">
    <label for="message">Message *</label>
    <textarea id="message" rows="20"></textarea>
  </div>
</form>