Как сделать так, чтобы последний столбец CSS-сетки с автоподгонкой сжимался ниже минимального значения minmax?

Question

Я использую следующий макет CSS Grid:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}

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

Проблема заключается в том, чточто если остался только один столбец (ширина сетки <1000 пикселей), столбец будет сжиматься до 500 пикселей и не будет уменьшаться больше этого размера, даже если сетка становится меньше, вызывая переполнение столбца. </p>

IЯ пробовал много комбинаций, включая вложение функций minmax, но не смог решить эту проблему.

Answer 1

Вы можете считать max-width на ваших элементах, используя vw единицу.Просто обратите внимание на maring / padding / border, чтобы определить правильное значение.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}

.grid>span {
  border: 2px solid red;
  height: 50px;
  max-width:100vw;
  box-sizing:border-box;
}

body {
 margin:0;
}

<div class="grid">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Answer 2

Я думаю, что это поможет

grid-template-columns: repeat(5,500px);