【发布时间】：2018-12-28 09:41:21
【问题描述】：
我的网格代码遇到问题。我想互相显示两个字段。我创建了两个 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>
【问题讨论】：
-
您在列上定义了 1fr，并让每个区域在每行上都占用它们
-
你有什么建议？
-
我在表单中对齐输入时遇到问题