我需要保持中间的网格项为空。我认为这将有可能与以下属性:grid-template-areas
grid-template-areas:
"header . header"
"main . ."
"footer . footer";
但不幸的是,这并没有给予正确的显示。
所以我用了5个类命名为item-a到item-e,然后在css中设置网格中的正确位置。然而,这并不是一种非常有效的方法。有谁知道如何使它更有效率吗?
.content-container {
width: 51.5em;
height: 30em;
padding: 2.125em 1.5em;
display: grid;
grid-template-columns: 45% auto 45%;
grid-template-rows: auto;
}
.item-a {
grid-column: 1;
grid-row: 1 / 3;
}
.item-b {
grid-column: 3;
grid-row: 1 / 3;
}
.item-c {
grid-column: 1;
grid-row: 2 / 3;
}
.item-d {
grid-column: 1;
grid-row: 3 / 3;
}
.item-e {
grid-column: 3;
grid-row: 3 / 3;
}
<div class="content-container">
<div class="item-a">
<label for="firstName" class="label">First Name</label>
<input id="firstName" type="text" class="input" placeholder="Enter your first name">
</div>
<div class="item-b">
<label for="lastName" class="label">Last Name</label>
<input id="lastName" type="text" class="input" placeholder="Enter your last name">
</div>
<div class="item-c">
<label for="email" class="label">Email</label>
<input id="email" type="email" class="input" placeholder="Enter your email">
</div>
<div class="item-d">
<label for="password" class="label">Password</label>
<input id="password" type="password" class="input" placeholder="Enter your password">
</div>
<div class="item-e">
<label for="passwordConfirmation" class="label">Confirm Password</label>
<input id="passwordConfirmation" type="password" class="input" placeholder="Enter your password again">
</div>
</div>
2条答案
按热度按时间xqnpmsa81#
你不需要所有的代码,你可以简化如下:
另一个简化:
xoefb8l82#
我有其他的解决方案,因为在这种情况下,我们可以选择精确字段可以被选择,并且该字段也有完整的大小。