Я столкнулся с проблемой с моим кодом сетки.Я хотел бы отобразить два поля друг к другу.Я создал два 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>