Это сайт — моя персональная записная книжка. Интересна мне, по большей части, история, своя жизнь и немного программирование.

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

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

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

17 комментариев
Viperet 2011

snap to grid — что это?

Артур 2011

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

Артём 2011

Евгений, а можно подробности?

Viperet, это «привязать к сетке», функция выравнивания по сетке, есть почти во всех графических редакторах.

Евгений Степанищев (bolknote.ru) 2011

Комментарий для Артём:

Подробности такие.

На заднем фоне — картинка-сетка, по центру — фигура, которая строится через JS, может отличаться время от времени, но все её элементы всегда попадают в сетку. Надо сделать, так, чтобы при изменении размера окна фигура всегда была по центру и нормально укладывалась в сетку на заднем фоне.

Александр Карпинский 2011

Комментарий для Евгения Степанищева:

Все равно не понятно. Делаем фигуру фиксированного размера, кратным шагу сетки. Делаем сетку с помошью картинки на фоне. Центруем и то и другое. Вроде удовлетворяет описанным условиям. Что-то недосказано?

Евгений Степанищев (bolknote.ru) 2011

Комментарий для Александр Карпинский:

Я лучше нарисую простенький аналог:

http://img-fotki.yandex.ru/get/4411/35419492.5b/0_5363f_d930c154_L#2011.08.15.png%7Chttp%3A%2F%2Ffotki.yandex.ru%2Fusers%2Fbolknote%2Fview%2F341567%2F%3Fpage%3D0#400x400

Надо сделать так, чтобы сетка была фоном страницы, а при изменении размеров шарики были точно в сетке и по центру страницы, то есть перескакивали рывком.

Боб 2011

Закреплен левый край сетки, а не центр? Нельзя упростить задачу закрепив центр?

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

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

Евгений Степанищев (bolknote.ru) 2011

Комментарий для Боб:

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

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

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

agonych (agonych.livejournal.com) 2011

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

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

<html>
<head>
<style>
html {
height: 100%;
}
body {
padding: 0;
margin: 0;
background: #FFF url(grid.gif) repeat center center;
height: 100%;
}

#container {
height: 1px;
left: 50%;
position: absolute;
top: 50%;
width: 1px;
}

#ball {
background: url(«ball.gif») no-repeat scroll 0 0

transparent;
height: 46px;
left: -23px;
margin: auto;
position: relative;
top: -23px;
width: 46px;
}
</style>
<body>
<div id=«container»><div id=«ball»></div></div>
</body>
</head>
</html>

agonych (agonych.livejournal.com) 2011

Только я бы не назвал это «snap to gird» — в моем понимании, Grid — это когда есть некая сетка и внутренние дивы всегда имеют размеры кратные этой сетки, при этом они могут растягиваться и сжиматься.

agonych (agonych.livejournal.com) 2011

ЗЫ, вот тут есть похожая тема: http://stackoverflow.com/questions/4117620/how-to-make-a-div-snapping-to-a-grid-via-css

Похоже, что с CSS такое не делается, только через JS.

Евгений Степанищев (bolknote.ru) 2011

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

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

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

Сергей Чикуёнок (chikuyonok.ru) 2011

Можно попробовать этот принцип: http://chikuyonok.ru/2010/01/liquid-site-markup/
Правда, в FF 3.5+ не будет работать.

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

А в FF это не сработает, потому что он шибко умный и не округляет внутри себя дробные пиксели.

Евгений Степанищев (bolknote.ru) 2011

Комментарий для chikuyonok.ru:

Я почему-то был уверен, что ты предложишь решение ;)

Крутое решение, спасибо, но FF 3.5+ мне нужен.

Сергей Чикуёнок (chikuyonok.ru) 2011

Комментарий для Евгения Степанищева:

На всякий случай: в FF4 и IE9 есть метод calc: https://developer.mozilla.org/en/CSS/-moz-calc

Евгений Степанищев (bolknote.ru) 2011

Комментарий для chikuyonok.ru:

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

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

Евгений Степанищев (bolknote.ru) 2011

Комментарий для chikuyonok.ru:

Вот: http://bolknote.ru/all/2644/