Читаю статьи и часто попадается термин - сетка сайта. Хотелось бы поподробнее понять что это такое. Так же конкретно интересует что обозначает числа в обозначениях двенадцатиколоночная сетка, трехколоночная сетка и т.д. На сколько я понял это разбиение контента сайта на определенные вертикальные области, но тогда возникает вопрос: это только семантически, условно или же эти колонки реальные контейнеры-обертки в коде? Если второе утверждение неверно то для чего вообще нужна сетка? Заранее спасибо.
Верно ваше следующее предположение — «реальные контейнеры-обёртки в коде».
Задаём блокам обёртки со специальными классами, а этим классам заведомо прописаны нужные стили в CSS
.
Здесь наглядный пример: bootstrap-grid.
Сетка помогает построить адаптив, при этом всё идёт в едином стиле(отступы везде равны). В хорошей вёрстке всё должно быть в едином стиле(отступы), точки перестроения(breakpoints
) адаптива должны быть одинаковыми(их основная часть).
Вот вам нужно сверстать сложный многостраничный сайт, как вам легче будет, каждую секцию отдельно адаптировать или просто готовые классы блокам задавать и всё будет адаптивно, при этом в едином стиле?
Также если нет сетки, а написано по некой своей задумке, то как в будущем другие разработчики будут в этом разбираться? Вам придётся делать документацию к сетке.
Если не нужна сторонняя сетка, обычно создаётся своя, но здесь нужно понимать зачем она создается и как её поддерживать.
Без сетки верстаются некоторые уникальные секции/сайты, где идёт сложная вёрстка, это всякие там промо-лендинги.
Популярная адаптивная сетка от Bootstrap
, преимущества её в том, что в будущем сторонние разработчики легко и быстро смогут разобраться, у нее есть документация на официальном сайте. Также нужно понимать, что Bootstrap
это не только сетка, а целый фреймворк, но там можно взять именно сетку и подключить только её.
Ведь даже многие дизайн-макеты делаются под сетку Bootstrap
(12 колонок), следовательно дизайнер рисует дизайн, который заведомо без проблем можно будет сверстать на Bootstrap
.
Итого: как новичку, для начала я вам рекомендую использовать сетку Bootstrap-4
, это поможет вам разобраться на примере, как собственно работает адаптив, также в случае проблем вам будет легче найти решение задачи, так как Bootstrap
очень популярен.
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Виртуальный выделенный сервер (VDS) становится отличным выбором
В чем разница тега HTML <article> и <section>? Какую в них хранить информацию? Могут ли они хранить в себе теги <header> и footer?
Подскажите, пожалуйста, есть сайт, на котором есть форма заявки c подсчетом на jqueryПеренесла все данные моделей в базу данных, выводятся модели...
Есть проблема, которая появляется только в маковском хроме