3

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

6
  • 2
    Про bootstrap почитай, сразу станет понятней 11 авг 2018 в 8:51
  • 1
    Здравствуйте. Верно следующее - «реальные контейнеры-обертки в коде». Задаем блокам обертки, со специальными классами. Здесь смотрите: getbootstrap.com/docs/4.1/layout/grid Сетка помогает построить адаптив, при этом все идет в едином стиле(отступы везде равны). Популярная адаптивная сетка от bootstrap, преимущества ее в том, что сторонние разработчики легко и быстро смогут разобраться, у нее есть документация на официальном сайте. Также нужно понимать, что bootstrap это не только сетка, а целый фреймворк, но там можно взять именно сетку. 11 авг 2018 в 9:44
  • @AlexandrKazakov а критично ли верстать сайты без сетки?
    – midia
    11 авг 2018 в 9:47
  • 1
    @midia Если не нужна сторонняя сетка, обычно создается своя. Поймите, что в хорошей верстке все должно быть в едином стиле(отступы), точки перестроения(breakpoints) адаптива должны быть одинаковыми(большинство из них). Вот вам нужно сверстать сложный многостраничный сайт, как вам легче будет, каждую секцию отдельно адаптировать или просто готовые классы блокам задавать и все будет адаптивно, при этом в едином стиле? Сторонний человек как будет разбираться в непонятном адаптиве? Без сетки верстаются некоторые уникальные секции/сайты, где идет сложная верстка, это всякие там промо-лендинги. 11 авг 2018 в 9:53
  • Спасибо, можете в ответ коммент вывести я приму:)
    – midia
    11 авг 2018 в 9:55

1 ответ 1

2

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

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

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

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

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.