Ширина колонки меньше minmax

Question

Если я уменьшу ширину контейнера, почему ячейки занимают менее 200 пикселей?

Я думаю, minmax должен сохранять ширину не меньше первого параметра (200 пикселей).

Если удалить стили для .a, .k и .g, то все в порядке.

https://codepen.io/rachelandrew/pen/GZQYQa

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;
  background-color: #fff;
}

.box {
  background-color: #444;
  color: white;
}

.a {
  grid-column: auto / span 2;
}

.k {
  grid-column: auto / span 3;
}

.g {
  grid-column: auto / span 2;
  grid-row: auto / span 2;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
  <div class="box i">I</div>
  <div class="box j">J</div>
  <div class="box k">K</div>
  <div class="box l">L</div>
  <div class="box m">M</div>
</div>

Answer 1

auto-fill и auto-fit создают неявную сетку (я не уверен. Я ничего не нашел в спецификации).

Следующая строка решает проблему

grid-auto-columns: minmax(200px, 1fr);

Answer 2

Проблема не в minmax().Проблема в auto-fill или grid-column / grid-row дополнениях.

Если вы переключаетесь с:

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

На, скажем:

grid-template-columns: repeat(4, minmax(200px, 1fr));

… Тогда соблюдается минимум 200px ( демонстрация codepen ).

Минимум 200px не соблюдается с auto-fill по причинам, описанным в спецификации Grid (хотя я неНа 100% уверен).

§ 7.2.2.2.Повторите для заполнения: auto-fill и auto-fit повторений

Когда в качестве номера повторения задается auto-fill, если контейнер сетки имеет определенный размер или максимальный размер всоответствующей оси, то число повторений является наибольшим возможным положительным целым числом, которое не приводит к тому, что сетка переполняет свой контейнерный массив (рассматривая каждую дорожку как ее функция определения максимального размера дорожки , если она определена или как ее минимальная дорожкав противном случае используется функция определения размера и с учетом gap.

^{(выделено мной)}

Итак, давайте разберемся с этим:

1. Я считаю, что контейнер имеет определенный размер , так как он является блочным элементом, поэтому он принимает ширину своего родителя.
2. Каждая дорожка принимает функция максимального размера дорожки , которая является вторым аргументом в функции minmax().В данном случае это 1fr.
3. Но спецификация гласит: "... рассматривать каждую дорожку как функцию максимального размера дорожки, если она определена ..." .Я не уверен, что 1fr считается определенного размера в этом сценарии, поэтому я не могу быть уверен, что это правило применяется.Похоже, что это применимо, основываясь на выводе, но это может и не быть причиной.
4. Другой поворот заключается в том, что минимум 200px minmax() с auto-fill действительно работает, если grid-column и grid-row дополнений удалено ( codepen demo ).

Я предполагаю, что это поведение описано в спецификации.