css-grid создает воображаемый столбец

Question

Я создаю простую форму, где я хочу иметь такой макет

Пока все хорошо, очень простые 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>

Answer 1

Размер минимум элемента сетки равен его содержанию; это означает, что min-width и min-height разрешаются в auto.

Чтобы обеспечить более разумный минимальный размер по умолчанию для элементов сетки, это спецификация определяет, что автоматическое значение min-width / min-height также применяет автоматический минимальный размер по указанной оси к элементам сетки чье переполнение является видимым и которое охватывает по крайней мере одну дорожку, чья минимальная Функция определения размера дорожки - автоматическая.

MDN

И обратите внимание, что элементы input имеют собственную ширину . Поэтому здесь вы можете добавить 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>