Как происходит вёрстка по сетке?

Сетка – это не изобретение разработчиков #Bootstrap. Просто в этом фреймворке используется ее оптимальный, классический вариант.

Определений сетки, наверно, можно нагуглить много. Для меня сетка – это система деления полезной ширины сайта на воображаемые доли, реализуемая через набор классов. Классика – это 12 “колонок”, поскольку их спокойно можно поделить на 2, 3, 4, 6 и 12 равных частей. Ну а неравных может быть еще больше. Хотя [в нелюбимом тобой CSS-фреймворке] делить можно так хочешь. Например, на 5 равных частей по 2/10:

<div class="col">
	...
</div>
<div class="col">
	...
</div>
<div class="col">
	...
</div>
<div class="col">
	...
</div>
<div class="col">
	...
</div>

А можно еще заковыристее. Первая колонка 5/12, остальные по 7/36:

<div class="col-5">
	...
</div>
<div class="col">
	...
</div>
<div class="col">
	...
</div>
<div class="col">
	...
</div>

Кроме колонок в сетке “участвуют” межколоночные и боковые отступы.

Поскольку верстка сейчас всегда адаптивная, ширины колонок указываются только в процентах. Отступы правильнее указывать в абсолютных величинах.

Колонки связаны с порогами адаптивности, определяемыми с помощью медиа-запросов (Media Queries): 12-колоночная сетка в процентах будет одинаково применяться как для фиксированных ширин, так и для “резины”. На каждом "пороге" будут действовать соответствующие ему классы колонок (см. пример ниже).

Используется сетка просто. Например, тебе необходимо сверстать 3 блока, которые на мобильном устройстве будут иметь 100% ширину, а на десктопе занимать равные доли по ширине:

<div class="col-12 col-xl-4">
	...
</div>
<div class="col-12 col-xl-4">
	...
</div>
<div class="col-12 col-xl-4">
	...
</div>

Здесь на ширинах экрана “от нуля” каждая из трех колонок будет занимать всю ширину, а от 1200px они “схлопнутся” и выстроятся в ряд с одинаковой шириной 4/12.

Пример сетки далеко не современный, но с указанием ее основных элементов: