Сетки помимо 12-ты колоночного Bootstrap, как быть?

Question

[Vetelek]

Доброго вечера суток, господа. Нужна ваша помощь, хотел спросить, как строить сетку, когда она не стандартная, например, вот такая:

Или тут уже надо строить на глазок?)
И что, делать если размеры заданы странно, например ширина контейнера тут получается 1920px; конечно, я могу уменшить её до стандартных 1200px; но тогда все елементы придется уменшать относительно уменьшеного размера контейнера.
Как научиться чуствовать все тонкосты? Где смотреть?

Comments

[Yustas Alexu]

Сетка нарисована от балды. Тут я вижу три варианта:

• дизайнер идиот
  
• дизайнер был пьян
  
• дизайнер-приколист
  

В любом случае я бы его побил за это )
Что делать? Забить на сетку.

Answer 1

[j n]

https://getbootstrap.com/docs/3.3/customize/

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

Answer 2

[Exploding]

Comments

[Vetelek]

ты меня спрашиваешь?))

[Exploding]

Vetelek, Нет. Наоборот, говорю: "Это же очевидно!"))

[Vetelek]

Exploding, ну не совсем, я мерял линейкой, то там в 2, 3 и 5-ых елементах разная ширина, как будто эти линейки просто так там стоят)

[Exploding]

Vetelek, Видимо дизайнер спешил или был пьян... Но в данном случае если использовать 12-ти кол. сетку, то это как по мне единственный правильный вариант реализации. По другому - бессмысленные телодвижения.
Делайте с контейнером и внутри с нормальной сеткой. Если кто будет выё... - спросите как же по их мнению это верстается правильно при этом не отходя от использования сетки.

[Exploding]

Vetelek, И обязательно уточните у дизайнера что он хотел сказать этими вертикальными линиями? Возможно это какое-то скрытое послание, а не сетка?))

Answer 3

[MedPas]

Хм. А с дизайнером возможности договориться не было? (В следующий раз - давайте свою разлинованную psd-шку)
Заказчик хочет попиксельную верстку? (тогда адЪ, страдания и костыли)
Если нет - придерживаться примерного расположения и не париться.
Или мигрировать на 4.

Comments

[Vetelek]

Да нет, я только учусь делать это, и только эти сетки вгоняют меня в ступор)
То есть когда сетка кривая какая-то, то делать все на глаз?

[Ankhena]

Vetelek, Почему на глаз? Полно инструментов позволяющих измерять расстояния. Есть pixel perfect расширения для браузеров для удобства.

Не все в мире сделано по сетке.

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

[Vetelek]

Да, я это понимаю, просто не понимаю когда ширина макета очень большая, а у меня только 1366, как тогда быть? пиксель перфект мне поможет в этом?

[Ankhena]

Vetelek,

и пиксель-перфект расширения тоже работают в этом режиме

Answer 4

[Максим Федоров]

В сетку укладывается все тут хорошо, пример:
- верхняя шапка — 2 колонки, col-md-6 (у правой колонки text-align:right;, то есть класс text-right)
- меню col-md-12
- надпись на баннере col-md-12



ниже вполне могут быть ряды и с 3 и 4 колонками

Answer 5

[s-morello]

Можно скрин полного макета ? Я тут совсем не вижу где тут сетка нужна.