Nano Hash - криптовалюты, майнинг, программирование

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

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

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

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

Проблема в том, что когда остается только один столбец (ширина сетки ‹ 1000 пикселей), столбец будет уменьшаться до тех пор, пока не достигнет 500 пикселей, и не будет уменьшаться больше, даже если сетка станет меньше, что приведет к переполнению столбца.

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

css css-grid
26.09.2019

Ответы:


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>

26.09.2019

2

я думаю это поможет

grid-template-columns: repeat(5,500px);
26.09.2019
  • Это создает 5 столбцов по 500 пикселей и не решает проблему. Я хотел бы сохранить поведение auto-fit и minmax, которые создают столько столбцов, сколько необходимо, и равномерно распределяют их по сетке. 26.09.2019
  • Я бы хотел, чтобы каждый столбец был размером не менее 500 пикселей и чтобы они увеличивались, чтобы занимать всю ширину сетки. grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); работает просто отлично, за исключением того, что он предотвращает сжатие столбцов, когда они представляют собой только один столбец. 26.09.2019
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..