css-grid创建一个虚构的列

Question

我正在创建一个简单的表单，我希望有这种布局

到目前为止，这么好，非常简单的2列有一个嵌套的2列，所有这些都是用0.5fr定义的，如果我理解正确，它应该是“自由空间”的一半。

但是，如果我尝试减少屏幕，就会发生这种情况。即使我没有媒体查询。

如果您使用chrome devtools进行调试，您可以看到它从无处创建第3列而没有任何元素。任何的想法？

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>

Answer 1

网格项的最小大小与其内容一样多;这意味着min-width和min-height解析为auto。

为了为网格项提供更合理的默认最小大小，此规范定义min-width / min-height的自动值还将指定轴中的自动最小大小应用于溢出可见且跨越至少一个的网格项轨道的最小轨道大小调整功能是自动的。

MDN

请注意，输入元素具有内在宽度。所以在这里你可以添加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>