Кто-нибудь делал CSS snap to grid?

У меня тут задача возникла очень нетривиальная — сделать CSS snap to grid. Если не получится, сделаю через JavaScript. С ходу вчера мне не удалось придумать как это сделать по горизонтали (а мне надо именно так), только по вертикали возникли кое-какие мысли.

Кто-нибудь может что-нибудь придумать? Надо кроссбраузерно.

программированиеcss

Комментарии 17

Артур № 2
Даже после перевода в Гугль-транслейте не понятно, что это такое, хотя само вот это выражение, snap to grid, так и вертится на языке, только вспомнить не могу, где я его встречал. Перефразировать можете? Или на картинке какой-нить показать, что требуется?
(Вот, вспомнил — это в Виндовсе можно «выровнять значки по сетке». Всеравно не понятно, что требуется.)
Артём № 3
Евгений, а можно подробности?

Viperet, это «привязать к сетке», функция выравнивания по сетке, есть почти во всех графических редакторах.
Евгений Степанищев (bolknote.ru) автор № 4
Подробности такие.

На заднем фоне — картинка-сетка, по центру — фигура, которая строится через JS, может отличаться время от времени, но все её элементы всегда попадают в сетку. Надо сделать, так, чтобы при изменении размера окна фигура всегда была по центру и нормально укладывалась в сетку на заднем фоне.
Александр Карпинский № 5
Все равно не понятно. Делаем фигуру фиксированного размера, кратным шагу сетки. Делаем сетку с помошью картинки на фоне. Центруем и то и другое. Вроде удовлетворяет описанным условиям. Что-то недосказано?
Евгений Степанищев (bolknote.ru) автор № 6
Я лучше нарисую простенький аналог:

http://img-fotki.yandex.ru/get/4411/354194 … D0#400x400

Надо сделать так, чтобы сетка была фоном страницы, а при изменении размеров шарики были точно в сетке и по центру страницы, то есть перескакивали рывком.
Боб № 7
Закреплен левый край сетки, а не центр? Нельзя упростить задачу закрепив центр?

Для браузеров, которые считают относительные размеры в пикселях (webkit, opera, ie6), сработает контейнер с шириной 100%/ширину клетки + вложенный контейнер 100%*ширину клетки — он будет увеличиваться по ширине с шагом в клетку. Относительно него уже можно позиционировать по-центру.

Расскажите, как вы решили по вертикали?
Евгений Степанищев (bolknote.ru) автор № 8

Попробуйте сверстать? А то может я рассказал что не так.

Расскажите, как вы решили по вертикали?

Я не решил мысли возникли, не уверен, что сработает. Но по вертикали мне не нужно :)

agonych (agonych.livejournal.com) № 9
Конкретно твой файл сделать не получается, размер квадрата и толщина линий должна быть четной (у тебя 47px и 9px), иначе фон не получится сделать полностью симметричным, и шарик будет «прыгать» на 1 пиксель.

А код вот такой:
agonych (agonych.livejournal.com) № 10
Только я бы не назвал это «snap to gird» — в моем понимании, Grid — это когда есть некая сетка и внутренние дивы всегда имеют размеры кратные этой сетки, при этом они могут растягиваться и сжиматься.
Евгений Степанищев (bolknote.ru) автор № 12

Комментарий для agonych.livejournal.com:

А код вот такой

Да, похоже это выход. Можно отказаться от идеи snap to grid и сделать так. Спасибо!

Сергей Чикуёнок (chikuyonok.ru) № 13
Можно попробовать этот принцип: http://chikuyonok.ru/2010/01/liquid-site-markup/
Правда, в FF 3.5+ не будет работать.

Если коротко, то суть такова. Делаешь два блока, один вложен в другой. Причём ширина внутреннего блока должна быть в N раз больше, где N — шаг сетки в пикселях. Например, если тебе нужен шаг в 5 пикселей, то контейнер должен быть шириной 100/5 = 20%, а внутренний — 100*5 = 500%. За счёт того, что ширина внутреннего блока будет считаться относительно округлённой ширины контейнера, получится изменение ширины внутреннего блока с шагом в 5 пикселей.

А в FF это не сработает, потому что он шибко умный и не округляет внутри себя дробные пиксели.
Евгений Степанищев (bolknote.ru) автор № 14
Я почему-то был уверен, что ты предложишь решение ;)

Крутое решение, спасибо, но FF 3.5+ мне нужен.
Евгений Степанищев (bolknote.ru) автор № 16
Комментарий для chikuyonok.ru:

Ну, мне ж кроссбраузерно :)

Про calc я знаю, как-то писал про него, когда возмущался, что из CSS уже JS делают :)