Question

我的网格代码遇到了问题。我想互相显示两个字段。我创建了两个1fr 1fr，每个字段应取一个fr。我什至尝试了网格区域，但由于某种原因它无法正常工作，但仍然无法使网格与网格对齐。非常感谢你。感谢您提出的任何想法

//=========================================================================
// [1]Contact Form
.contact {
  @include flexy (
    $width:100%,
    $dir: column,
  );
  grid-area: form; 
  display: grid; 
  grid-auto-columns: 1fr 1fr;
  grid-auto-rows: auto;
  grid-template-areas: 
  "form-heading form-heading"
  "grid-form grid-form";
}
// Heading and Paragraph Text
.form-text {
  @include flexy (
    $dir: column,
  );
  grid-area: form-heading;
}
// Whole Form
.form {
  @include flexy (
    $width: 100%,
    $just: center,
  );
  @include mg("md") {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
  };

  grid-area: grid-form;
}
// Each Field
.field {
  @include flexy (
    $dir: column,
    $width: 100%,
  );
  padding: 5% 0 5% 0;
}
// ID for Grid
#grid-name {
  grid-column: 1/2;
}
#grid-email {
  grid-column: 2/3 ;
}
#grid-condition {

  grid-column: 1/2;
}
#grid-price {

  grid-column: 2/3;
}
#grid-company {

}
#grid-lease {

}
#grid-other {

}
#grid-message {

}
#grid-submit-btn {

}

 <div class="contact">
          <div class="form-text">
            <h2>Get in touch</h2>
            <p>Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus, lacus eget hendrerit bibendum, urna est aliquam sem, sit amet imperdiet est velit quis lorem.</p>
         </div>
          <div class="form">
            <form method="post" action="#">
                  <div class="field half" id="grid-name">
                    <label for="name">Name</label>
                    <input type="text" name="name" id="name"/>
                  </div>
                  <div class="field half" id="grid-email">
                    <label for="email">Email</label>
                    <input type="text" name="email" id="email" />
                  </div>
                  <div class="field half" id="grid-condition">
                   <label for="condition">Condition</label>
                   <input type="text" name="text" id="condition" />
                  </div>
                  <div class="field half" id="grid-price">
                    <label for="price">Price</label>
                    <input type="text" name="price" id="price" />
                  </div>
                  <div class="field half" id="grid-company">
                    <label for="company">Company</label>
                    <input type="text" name="company" id="company" />
                  </div>
                  <div class="field half" id="grid-lease">
                   <label for="lease">Lease</label>
                   <input type="text" name="lease" id="lease" />
                  </div>
                  <div class="field half" id="grid-other">
                    <label for="other">Other</label>
                    <input type="text" name="other" id="other" />
                  </div>
                  <div class="field" id="grid-message">
                    <label for="message">Message</label>
                    <textarea name="message" id="message" rows="5"></textarea>
                  </div>             
                <ul class="actions">
                 <li><button class="btn-form" type="submit" id="submit-btn"> Send Message</button></li>
                </ul>
            </form>  
          </div>        
       </div>

Answer 1

我必须不是在.form类上实现网格，而是在表单本身上实现。

网格列fr不适用

1 个答案: