В CSS Grid, почему 1FR + 9FR не ведут себя так же, как 10FR на маленьких экранах?

Question

Итак, я определяю макет в CSS Grid, для которого в этой конкретной строке должны быть входы одинакового размера. Я могу сделать математику и просто указать проценты, и она отлично работает (см. Закомментированную строку), но когда я указываю ее через дробную единицу (fr), тогда составной столбец «сжижается» больше, чем столбцы без составных элементов.

.A {
  grid-area: a;
}

.B {
  grid-area: b;
}

.C {
  grid-area: c;
}

.Exchange_Row {
  display: grid;
  grid-template-columns: 1fr 9fr 10fr 10fr 1fr;
  /*
   grid-template-columns:  3% 27% 30% 30% 3%;
  */
  grid-template-areas: "a a b c ."
}

input[type=text] {
  border: solid;
}

<div style="width: 90%; border: solid; border-radius: 5px; padding: 5px;">
  <div id="currencyRow" class="Exchange_Row">
    <input type="text" class="A" value="A" />
    <input type="text" class="B" value="B" />
    <input type="text" class="C" value="C" />
  </div>
</div>

Когда я изменяю размер изображения до узкого (более 598), тогда A продолжает уменьшаться (до 127px), но B и C остаются неизменными на 169px.

Если я закомментирую строку grid-template-columns с использованием единиц измерения fr и вместо этого использую проценты ниже, то все будет работать нормально.

Вот скриншоты, показывающие различные размеры, когда столбцы определены с использованием единиц измерения fr (как в коде выше):

Кто-нибудь может мне помочь понять, почему это происходит? Я ожидал, что A остановится на 169px или же B и C продолжат сокращаться до 127px, поскольку все они определены почти одинаково.

Answer 1

Добавьте min-width:0 к вводу, и вы должны зафиксировать процентное значение, чтобы они точно совпадали с fr. У вас есть 31fr, поэтому 1fr составляет около 100/31 = 3.225%

.A {
  grid-area: a;
}

.B {
  grid-area: b;
}

.C {
  grid-area: c;
}

.Exchange_Row {
  display: grid;
  grid-template-columns: 1fr 9fr 10fr 10fr 1fr;
  grid-template-areas: "a a b c ."
}
.Exchange_Row.percentage {
 grid-template-columns:  3.225% 29.03% 32.25% 32.25% 3.225%;
}

input[type=text] {
  border: solid;
  min-width:0;
}

<div style="width: 90%; border: solid; border-radius: 5px; padding: 5px;">
  <div id="currencyRow" class="Exchange_Row">
    <input type="text" class="A" value="A" />
    <input type="text" class="B" value="B" />
    <input type="text" class="C" value="C" />
  </div>
</div>
<div style="width: 90%; border: solid; border-radius: 5px; padding: 5px;">
  <div id="currencyRow" class="Exchange_Row percentage">
    <input type="text" class="A" value="A" />
    <input type="text" class="B" value="B" />
    <input type="text" class="C" value="C" />
  </div>
</div>

Это относится к Автоматическому минимальному размеру элементов сетки и тому, как элементы сетки имеют размер . Элемент ввода имеет ширину по умолчанию, установленную браузером, которая считается минимальным размером (она также совпадает с flexbox ). Этот размер используется для определения размера столбца 10fr.

Если мы ссылаемся на вышеуказанные ссылки:

После размещения элементов сетки рассчитываются размеры дорожек сетки (строк и столбцов) с учетом размеров их содержимого и / или доступного пространства, как указано в определение сетки .

Оба столбца (определяемые 10fr) будут иметь размер с учетом их содержимого (входного элемента), но первые два столбца (1fr и 9fr) не могут быть измерены с использованием входных данных, поскольку этот столбец охватывает оба их и не только один из них. Другими словами: столбцы 1fr и 9fr не имеют явного содержимого, поэтому они будут иметь размер в соответствии с доступным пространством, тогда вход будет соответствовать этому пространству.

Другими словами, первый вход имеет размер на основе 1fr и 9fr, но другой вход имеет размер 10fr.

Добавляя min-width:0, мы убираем ограничение «Минимальный автоматический размер», поэтому размер содержимого больше не учитывается, и все столбцы сетки будут измеряться с использованием доступного пространства, тогда входные данные будут соответствовать этому размеру.

Добавление width:100% также исправит проблему, но по-другому. В этом случае мы указываем входу иметь ширину на основе содержащего его блока (элемент сетки), поэтому нам нужно сначала определить размер элемента сетки (учитывая доступное пространство), а затем разрешить процентное значение, чтобы определить размер ввода .

Это произойдет с любой конфигурацией, даже если вы измените значения fr:

.A {
  grid-area: a;
}

.B {
  grid-area: b;
}

.C {
  grid-area: c;
}

.Exchange_Row {
  display: grid;
  grid-template-columns: 5fr 5fr 1fr 1fr 1fr;
  grid-template-areas: "a a b c ."
}
.Exchange_Row.another {
 grid-template-columns:  50fr 50fr 3fr 1fr 1fr;
}

input[type=text] {
  border: solid;
}

<div style="width: 90%; border: solid; border-radius: 5px; padding: 5px;">
  <div id="currencyRow" class="Exchange_Row">
    <input type="text" class="A" value="A" />
    <input type="text" class="B" value="B" />
    <input type="text" class="C" value="C" />
  </div>
</div>
<div style="width: 90%; border: solid; border-radius: 5px; padding: 5px;">
  <div id="currencyRow" class="Exchange_Row another">
    <input type="text" class="A" value="A" />
    <input type="text" class="B" value="B" />
    <input type="text" class="C" value="C" />
  </div>
</div>

Даже если мы определим большее значение для первого ввода, другой всегда победит, потому что он определит размер своего собственного столбца сетки, а первый просто возьмет оставшиеся.

UPDATE

Другой способ объяснить это (как комментарий @Michael_B) состоит в том, что 1fr единица эквивалентна minmax(auto,1fr), что означает, что для столбца 10fr мы имеем размер auto содержимое как нижняя граница, что не относится к двум первым столбцам, поскольку они не имеют входных данных в качестве содержимого.

Мы можем использовать minmax(0,1fr), чтобы преодолеть это вместо использования min-width:0

.A {
  grid-area: a;
}

.B {
  grid-area: b;
}

.C {
  grid-area: c;
}

.Exchange_Row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,9fr) minmax(0,10fr) minmax(0,10fr) minmax(0,1fr);
  grid-template-areas: "a a b c ."
}
.Exchange_Row.percentage {
 grid-template-columns:  3.225% 29.03% 32.25% 32.25% 3.225%;
}

input[type=text] {
  border: solid;
}

<div style="width: 90%; border: solid; border-radius: 5px; padding: 5px;">
  <div id="currencyRow" class="Exchange_Row">
    <input type="text" class="A" value="A" />
    <input type="text" class="B" value="B" />
    <input type="text" class="C" value="C" />
  </div>
</div>
<div style="width: 90%; border: solid; border-radius: 5px; padding: 5px;">
  <div id="currencyRow" class="Exchange_Row percenage">
    <input type="text" class="A" value="A" />
    <input type="text" class="B" value="B" />
    <input type="text" class="C" value="C" />
  </div>
</div>