#фишка дня

Как заставить элемент изменять свою ширину... ступенчато?

Ну, например, вам нужно, чтобы шахматная сетка при любых условиях оставалась цельной.

И сегодня у нас аж несколько вариантов, как этого добиться.

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 #бородач