Как правильно работать с сетками?

Question

[Сергей Васенин]

Подскажите как распланировать сетку как на мекете до этого накидывал просто готовые варианты. Потом понял что сайт должен быть адаптивный поэтому решил сделать через bootstrap. Хотел совета гуру как правильно распланировать по сеткам шаблон. С шапкой немого понятно на картинке видно что jpg занимает 7 сеток h1 заголовок 5 в итоге получаем col-md-7 и 5. но есть непонятное для меня как сделать картинки которые выходят за шапку причем через сетку. проще было бы через позиционирование но потом не понятно как сделать адаптивность

Comments

[Hyubert]

Вы о каких картинка? там два блока по 6 колонок с отцентрированим контентом.

[Сергей Васенин]

Hyubert, 12 блоков 7 из которых занимает картинка шапки

[Hyubert]

Сергей Васенин, это бекграунд шапки он не влияет на сетку.

[Сергей Васенин]

Hyubert, ну меня интересует каким образом лучше картинки эти расположить

[Hyubert]

Сергей Васенин, facepalm
так я и говорю вам как можно их роставить.

[Сергей Васенин]

Hyubert, хотите сказать что будет пустые 6 колонок а потом 6 колонок в них 2 картинки ? и позиционировать их ?

[Hyubert]

Сергей Васенин, не будет пустих и не нужно их позицинировать. Впрочем видимо для Вас это сложно, иди почитайте сначала про устройство сеток, создайте свою и Вам все станет ясно.

[Hyubert]

Сергей Васенин, вот Вам грубый пример на флексах

[Сергей Васенин]

Hyubert, сейчас речь идет не о флексбокс я же написал что я не хочу лишней волокиты мне нужен вариант именно с бутстрап

[Hyubert]

Сергей Васенин, я Вам даю не готовое решение, а пример размещения по 12 колоночной сетки, которую и использует бутстрап, там это на флоатах а в примере я использовал флекс, от того логика размещения блоков не изменилась

[Hyubert]

Сергей Васенин, все что поменяеться то вместо моих

.header__left
.header__right

будет

.col-md-6
.col-md-6

[Сергей Васенин]

Hyubert, наверное не совсем ещё понимаю всех рецептов (

[Hyubert]

Сергей Васенин, по этому я и написал

Впрочем видимо для Вас это сложно, иди почитайте сначала про устройство сеток, создайте свою и Вам все станет ясно.

[Сергей Васенин]

Hyubert, я знаю как создаются сетки если что но это меня в ступор вводит

[Hyubert]

Сергей Васенин, вы пример смотрели? там реализация того что вам нужно в 50 строк css с которих 20 это внешний вид, то есть ненужни вам

А насчет

я знаю как создаются сетки если что

- если б это было так то вы б не задавали такой простой вопрос.

Answer 1

[Александр]

Мне кажется этот макет делал дизайнер который только слышал такое понятие как сетка.
Для чего она нужна он может и догадывается, но вот как с ней работать не понимает.
То что у него два элемента (Только меню и логотип. Текст внизу просто по центру, надпись под амазоном не по сетке) попали по сетке можно считать случайностью.
Картинка накладывается бекграундом на боди или на див обертку и к сетке отношения не имеет.
Возможно на других экранах что то и будет привязано к сетке и я зря ругаю дизайнера, но что то я сомневаюсь :)