Как заставить элемент изменять свою ширину... ступенчато?
Ну, например, вам нужно, чтобы шахматная сетка при любых условиях оставалась цельной.
И сегодня у нас аж несколько вариантов, как этого добиться.
1. От Аны Тюдор: https://codepen.io/thebabydino/pen/zYbZpBq
Используем функцию модуля:
width: calc(95vmin + -1*mod(95vmin, 15px));
Но вот беда, в Chrome модуль пока не поддерживается... но не унываем! Есть ещё два варианта от Темани Афифа aka CSS Challenges.
2. Эффективное значение функции выше это, буквально, округление. Но так и такая функция в CSS имеется! Как-то так:
min-width: round(95vmin,15px);
Пример: https://codepen.io/alinaki/pen/VwRMpPY
И раньше это не работало в Chrome, до версии 125. Просто потому что ребята их Chrome решили сделать сразу тригонометрию, забыв про простую арифметику.
Ну и ещё вариант...
3. CSS Grid конечно же: https://codepen.io/t_afif/pen/KKEXwmR
И секрет будет в правиле:
grid-template-columns: repeat(auto-fill, 15px);
Всем шахмат, котаны :)
#css #trick #math #бородач