Что такое сетка сайта

161
27 октября 2018, 03:00

Читаю статьи и часто попадается термин - сетка сайта. Хотелось бы поподробнее понять что это такое. Так же конкретно интересует что обозначает числа в обозначениях двенадцатиколоночная сетка, трехколоночная сетка и т.д. На сколько я понял это разбиение контента сайта на определенные вертикальные области, но тогда возникает вопрос: это только семантически, условно или же эти колонки реальные контейнеры-обертки в коде? Если второе утверждение неверно то для чего вообще нужна сетка? Заранее спасибо.

Answer 1

Верно ваше следующее предположение — «реальные контейнеры-обёртки в коде». Задаём блокам обёртки со специальными классами, а этим классам заведомо прописаны нужные стили в CSS. Здесь наглядный пример: bootstrap-grid.

Сетка помогает построить адаптив, при этом всё идёт в едином стиле(отступы везде равны). В хорошей вёрстке всё должно быть в едином стиле(отступы), точки перестроения(breakpoints) адаптива должны быть одинаковыми(их основная часть). Вот вам нужно сверстать сложный многостраничный сайт, как вам легче будет, каждую секцию отдельно адаптировать или просто готовые классы блокам задавать и всё будет адаптивно, при этом в едином стиле? Также если нет сетки, а написано по некой своей задумке, то как в будущем другие разработчики будут в этом разбираться? Вам придётся делать документацию к сетке. Если не нужна сторонняя сетка, обычно создаётся своя, но здесь нужно понимать зачем она создается и как её поддерживать.

Без сетки верстаются некоторые уникальные секции/сайты, где идёт сложная вёрстка, это всякие там промо-лендинги.

Популярная адаптивная сетка от Bootstrap, преимущества её в том, что в будущем сторонние разработчики легко и быстро смогут разобраться, у нее есть документация на официальном сайте. Также нужно понимать, что Bootstrap это не только сетка, а целый фреймворк, но там можно взять именно сетку и подключить только её.

Ведь даже многие дизайн-макеты делаются под сетку Bootstrap(12 колонок), следовательно дизайнер рисует дизайн, который заведомо без проблем можно будет сверстать на Bootstrap.

Итого: как новичку, для начала я вам рекомендую использовать сетку Bootstrap-4, это поможет вам разобраться на примере, как собственно работает адаптив, также в случае проблем вам будет легче найти решение задачи, так как Bootstrap очень популярен.

READ ALSO
Разница 2 тегов HTML

Разница 2 тегов HTML

В чем разница тега HTML <article> и <section>? Какую в них хранить информацию? Могут ли они хранить в себе теги <header> и footer?

254
Вопрос по семантика HTML

Вопрос по семантика HTML

По семантике HTML можно в main вкладывать section или article?

164
Подставить в формулу jquery из базы данных

Подставить в формулу jquery из базы данных

Подскажите, пожалуйста, есть сайт, на котором есть форма заявки c подсчетом на jqueryПеренесла все данные моделей в базу данных, выводятся модели...

184
OnWheel работает некорректно в маковском хроме

OnWheel работает некорректно в маковском хроме

Есть проблема, которая появляется только в маковском хроме

183