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

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

Ответ

Верно ваше следующее предположение — «реальные контейнеры-обёртки в коде». Задаём блокам обёртки со специальными классами, а этим классам заведомо прописаны нужные стили в CSS. Здесь наглядный пример: bootstrap-grid
Сетка помогает построить адаптив, при этом всё идёт в едином стиле(отступы везде равны). В хорошей вёрстке всё должно быть в едином стиле(отступы), точки перестроения(breakpoints) адаптива должны быть одинаковыми(их основная часть). Вот вам нужно сверстать сложный многостраничный сайт, как вам легче будет, каждую секцию отдельно адаптировать или просто готовые классы блокам задавать и всё будет адаптивно, при этом в едином стиле? Также если нет сетки, а написано по некой своей задумке, то как в будущем другие разработчики будут в этом разбираться? Вам придётся делать документацию к сетке. Если не нужна сторонняя сетка, обычно создаётся своя, но здесь нужно понимать зачем она создается и как её поддерживать.
Без сетки верстаются некоторые уникальные секции/сайты, где идёт сложная вёрстка, это всякие там промо-лендинги.
Популярная адаптивная сетка от Bootstrap, преимущества её в том, что в будущем сторонние разработчики легко и быстро смогут разобраться, у нее есть документация на официальном сайте. Также нужно понимать, что Bootstrap это не только сетка, а целый фреймворк, но там можно взять именно сетку и подключить только её.
Ведь даже многие дизайн-макеты делаются под сетку Bootstrap(12 колонок), следовательно дизайнер рисует дизайн, который заведомо без проблем можно будет сверстать на Bootstrap
Итого: как новичку, для начала я вам рекомендую использовать сетку Bootstrap-4, это поможет вам разобраться на примере, как собственно работает адаптив, также в случае проблем вам будет легче найти решение задачи, так как Bootstrap очень популярен.