html - 用于布局表单的 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>

这是应用 cssgrid 的 css

&__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-column ， grid-row 所以如果有任何更直接的方法请让我知道这个简单的方法需要太多的努力

标签： htmlcssflexboxcss-grid

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;
    }

}

截图：