На подобные вопросы ответы всегда очевидны и элементарны
как делается такой дизайн
Ничего «такого» в нём нет, самый обычный дизайн — плитка, меню, сайдбар.
По какой сетке он делается
Левое меню + три колонки плитки товаров фиксированной ширины, а внутри вообще иначе — левая колонка меню + одна колонка контента + сайдбар и всё разной ширины. Сейчас везде нужна какая-то строгая сетка как это было раньше. Сейчас не надо втискивать контент в заранее нарисованную сетку, а надо располагать контент как задумано и исходя из этого искать сетку. Вот дизайнер того сайта решил сделать так, с упором на адекватное отображение и на мобильных устройствах и на ПК мониторах. В общем, на мой взгляд, подход логичный для этого контента.
в каких разрешениях нужны макеты для верстальщика?
Это надо спрашивать у верстальщика т.к. все привыкли работать по-разному. Одним нужно по макету под каждое разрешение, другим достаточно текстового описания поведения или гайдлайна (если это под какой-то бутстрап или подобное), а третьим хватит одного макета и дальше сами. Вам посоветуют сейчас одно, а на практике может понадобиться другое или вообще не понадобиться. Я всегда уточняю эти нюансы заранее, перед созданием дизайна.
Средний
