css-grid创建一个虚构的列 [英] css-grid creates an imaginary column
问题描述
我正在创建一个简单的表单，我想在其中使用这种布局
I am creating a simple form, where I want to have this kind of layout
到目前为止，非常好，非常简单的2列，嵌套2列，所有这些都定义为0.5fr，如果我理解正确的话，它们应该是自由空间的一半。
So far so good, very simple 2 columns with a nested 2 columns, all of them defined with 0.5fr which should be the half of "free-space" if I understood correctly.
但是，如果我尝试缩小屏幕，就会发生这种情况。即使我没有媒体查询。
But, if I try to reduce the screen, this happens. even if I have NO media queries.
如果您调试使用chrome devtools，您可以看到它从无处创建第3列，没有任何元素。有想法吗？
if you debug with chrome devtools you can see it's creating a 3rd column from nowhere without any element. Any idea?
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>
推荐答案
网格项的最小大小与其内容一样多；这意味着最小宽度和最小高度解析为 auto 。
The minimum size of a grid item is as much as its content; which means that min-width and min-height resolves to auto.
为了为网格项提供更合理的默认最小大小，此
规范定义了min的自动值-width / min-height
还会在指定的轴上将自动最小尺寸应用于网格项目
，该网格项目的溢出是可见的并且跨越至少一个轨道，且其最小
轨道大小调整功能是自动的。
To provide a more reasonable default minimum size for grid items, this specification defines that the auto value of min-width/min-height also applies an automatic minimum size in the specified axis to grid items whose overflow is visible and which span at least one track whose min track sizing function is auto.
请注意， input 元素的宽度为 instrinsic 。因此，您可以在此处将最小宽度：0 添加到 input 元素以修复 -参见下面的演示：
And note that input elements have an instrinsic width. So here you can add min-width: 0 to input elements to fix the issue - see demo below:
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列网格布局进行这项工作：
But there is no need for a lot of nesting here (I am suggesting a change in markup here) - you can make this work in a simple 4-column grid layout like below:
.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>
这篇关于css-grid创建一个虚构的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
