css - 网格列 fr 不适用

问题描述

我的网格代码遇到问题。我想互相显示两个字段。我创建了两个 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>

标签： csscss-grid

css - 网格列 fr 不适用

问题描述

解决方案

推荐阅读