html - css-grid 创建一个假想的列
问题描述
我正在创建一个简单的表单,我想要这种布局
到目前为止一切都很好,非常简单的 2 列带有嵌套的 2 列,所有这些列都用 0.5fr 定义,如果我理解正确的话,这应该是“自由空间”的一半。
但是,如果我尝试缩小屏幕,就会发生这种情况。即使我没有媒体查询。
如果您使用 chrome devtools 进行调试,您可以看到它正在从无处创建一个没有任何元素的第三列。任何想法?
https://stackblitz.com/edit/js-zzm4gy?file=index.html
h1, h2 {
font-family: Lato;
}
.form{
border: 1px solid black;
text-align: center;
display: grid;
grid-template-rows: 1fr;
grid-gap: 1em;
}
.two-field{
display: grid;
grid-template-columns: 0.25fr 0.75fr;
}
/********************/
/* Four elements row*/
/********************/
.four-field{
display: grid;
grid-template-columns: 0.5fr 0.5fr;
}
.four-field .left{
display: grid;
grid-template-columns: 0.5fr 0.5fr;
}
.four-field .right{
display: grid;
grid-template-columns: 0.25fr 0.75fr;
}
/********************/
/********************/
/********************/
/********************/
/******Buttons*******/
/********************/
.buttons{
display: grid;
grid-template-columns: 0.25fr 0.75fr;
}
.button-column{
display: grid;
grid-template-columns: 0.5fr 0.5fr;
grid-column-gap: 1em;
}
/********************/
/********************/
/********************/
<div id="app">
<form class="form">
<div class="two-field">
<label>First name:</label>
<input type="text" name="firstname">
</div>
<div class="four-field">
<div class="left">
<label>Postal code:</label>
<input type="text" name="Postal code">
</div>
<div class="right">
<label>Place:</label>
<input type="text" name="Place" >
</div>
</div>
<div class="two-field">
<label>Phone</label>
<input type="text" name="phone">
</div>
<div class="buttons">
<div class="empty"></div>
<div class="button-column">
<button type="submit">Confirm</button>
<button>Abort</button>
</div>
</div>
</form>
</div>
解决方案
网格项的最小尺寸与其内容一样多;这意味着并解析为.min-width
min-height
auto
为了给网格项提供一个更合理的默认最小尺寸,本规范定义了 min-width/min-height 的自动值也将指定轴上的自动最小尺寸应用于溢出可见且跨越至少一个最小轨道大小功能为自动的轨道。
请注意,输入元素具有固有的宽度。因此,您可以在此处添加元素来 min-width: 0
解决问题- 请参见下面的演示:input
h1, h2 {
font-family: Lato;
}
.form{
border: 1px solid black;
text-align: center;
display: grid;
grid-template-rows: 1fr;
grid-gap: 1em;
}
input {
min-width: 0; /* ADDED */
}
.two-field{
display: grid;
grid-template-columns: 0.25fr 0.75fr;
}
/********************/
/* Four elements row*/
/********************/
.four-field{
display: grid;
grid-template-columns: 0.5fr 0.5fr;
}
.four-field .left{
display: grid;
grid-template-columns: 0.5fr 0.5fr;
}
.four-field .right{
display: grid;
grid-template-columns: 0.25fr 0.75fr;
}
/********************/
/********************/
/********************/
/********************/
/******Buttons*******/
/********************/
.buttons{
display: grid;
grid-template-columns: 0.25fr 0.75fr;
}
.button-column{
display: grid;
grid-template-columns: 0.5fr 0.5fr;
grid-column-gap: 1em;
}
/********************/
/********************/
/********************/
<div id="app">
<form class="form">
<div class="two-field">
<label>First name:</label>
<input type="text" name="firstname">
</div>
<div class="four-field">
<div class="left">
<label>Postal code:</label>
<input type="text" name="Postal code">
</div>
<div class="right">
<label>Place:</label>
<input type="text" name="Place" >
</div>
</div>
<div class="two-field">
<label>Phone</label>
<input type="text" name="phone">
</div>
<div class="buttons">
<div class="empty"></div>
<div class="button-column">
<button type="submit">Confirm</button>
<button>Abort</button>
</div>
</div>
</form>
</div>
建议
但是这里不需要很多嵌套(我建议在此处更改标记) - 您可以在一个简单的 4 列网格布局中进行这项工作,如下所示:
.form {
border: 1px solid black;
text-align: center;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1em;
padding: 10px;
}
input {
min-width: 0;
}
input[name=firstname],
input[name=phone] {
grid-column: span 3;
}
.button-column {
grid-column: 2 / 5;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1em;
}
<div id="app">
<form class="form">
<label>First name:</label>
<input type="text" name="firstname">
<label>Postal code:</label>
<input type="text" name="Postal code">
<label>Place:</label>
<input type="text" name="Place">
<label>Phone</label>
<input type="text" name="phone">
<div class="button-column">
<button type="submit">Confirm</button>
<button>Abort</button>
</div>
</form>
</div>
推荐阅读
- python - 无法用多个转义字符替换字符串
- mysql - 在同一张表上连接
- javascript - 定制组件 IONIC 4
- python - 卸载的 Julia - 如何重置 conda 路径变量
- amazon-web-services - 创建 DynamoDB 表的本地副本
- angular - 如何在 Angular Material Date Picker 中包含前导零?
- node.js - 如何为 Alexa / Amazon Echo 在多个 Amazon.NextIntent 链中设计和传递信息
- azure - Azure 数据工厂 v2 - 遍历表中的服务器列表时遇到问题
- javascript - 使用 axios 从 404 响应中捕获错误消息或在 javascript 中获取
- java - javax.mail.AuthenticationException - Google 云应用引擎 - Spring Boot