Почему размер контента отличается, если у нас больше столбцов в сетке CSS?

Question

Почему это:

div {
  width: 200px;
  display: grid;
  grid: "first second" / 1fr 1fr;
  background-color: #ccc;
  padding: 8px;
}

#first {
  grid-area: first;
}

#second {
  grid-area: second;
}

<div>
  <input id="first" />
  <input id="second" />
</div>

Вести себя не так:

div {
  width: 200px;
  display: grid;
  grid: "first first second second" / 1fr 1fr 1fr 1fr;
  background-color: #ccc;
  padding: 8px;
}

#first {
  grid-area: first;
}

#second {
  grid-area: second;
}

<div>
  <input id="first" />
  <input id="second" />
</div>

Обратите внимание, что единственное, что я изменил, это количество столбцов и область, которую занимает каждый вход.

Answer 1

Это проблема со спецификацией и тем, как 1fr интерпретируется.

Из сообщения об ошибке / выпуске W3C

«Проблема» заключается в том, что 1fr разрешается в minmax(auto, 1fr), и это означает, что нам нужно знать размер (родительский) перед разрешением размера дорожки 1fr (поскольку функция определения размера минимальной дорожки имеет размер содержимого, это автоматически).

Существует быстрое решение этой проблемы от автора POV, просто заменив, например, 1fr на minmax (0px, 1fr).

.. или в этом случае просто установите min-width:0 для дочерних элементов.

Answer 2

Обратите внимание, что эта проблема не является проблемой CSS Grid.Это больше относится к input элементам.

Вот ваш код с использованием input элементов:

div {
  display: grid;
  width: 200px;  
  background-color: #ccc;
  padding: 8px;
}

div[one] {
  grid: "first second" / 1fr 1fr;
}

div[two] {
  grid: "first first second second" / 1fr 1fr 1fr 1fr;
}

#first {
  grid-area: first;
}

#second {
  grid-area: second;
}

<div one>
  <input id="first" />
  <input id="second" />
</div>

<hr>

<div two>
  <input id="first" />
  <input id="second" />
</div>

Существует разница в двух макетах.

Теперь ваш код использует элементы section вместо входов:

article {
  display: grid;
  width: 200px;  
  background-color: #ccc;
}

article[one] {
  grid: "first second" / 1fr 1fr;
}

article[two] {
  grid: "first first second second" / 1fr 1fr 1fr 1fr;
}

#first {
  grid-area: first;
  height: 25px;
  background-color: green;
}

#second {
  grid-area: second;
  height: 25px;
  background-color: red;  
}

<article one>
  <section id="first"></section>
  <section id="second"></section>
</article>

<hr>

<article two>
  <section id="first"></section>
  <section id="second"></section>
</article>

Нет никакой разницы.

По сути, это сводится к внутренней ширине input элементов, которая является стандартной функцией в большинстве браузеров.,Эта проблема обсуждается более подробно здесь:

• элементы ввода / кнопки, не сжимающиеся в гибком контейнере

Простой способ отключить эту функциюможно:

1. переопределить значение по умолчанию min-width: auto для элементов сетки, добавив min-width: 0 ( объяснение ) или
2. , переключившись с 1fr (который представляет minmax(auto, 1fr)) до minmax(0px, 1fr).

Answer 3

Я думаю, что это проблема рендеринга, вызванная шириной по умолчанию, установленной браузером для входных данных.Это исправлено добавлением 100% ширины для входов и настройкой рамочной модели.

div {
  width: 200px;
  display: grid;
  grid: "first second" / 1fr 1fr;
  background-color: #ccc;
  padding: 8px;
}

#first {
  grid-area: first;
}

#second {
  grid-area: second;
}

input {
  width: 100%;
}

* {
  box-sizing: border-box;
}

<div>
  <input id="first" />
  <input id="second" />
</div>