Живой результат
Холст макета
Включён мобильный вариант: блоки идут в один столбец по порядку DOM. Чтобы рисовать области, выключите настройку «До 600 px».
Как читать сетку
Числа задают линии: 1 / 3 занимает две ячейки. Порядок HTML-элементов в документе называется DOM. При наложении более поздний блок виден сверху. Визуальное положение не меняет порядок чтения; кнопки ↑ / ↓ меняют порядок HTML. Пустые клетки — вспомогательная разметка мастерской, в готовый HTML они не попадут.