Если я правильно понимаю, что при вьюпорте меньше 1200 должен быть один слайд, то так и указать в настройках слайдера. slidesPerView: 1
Ну и отступы для обертки по 20px.
Блочные элементы по умолчанию занимают доступную ширину родителя.
Поэтому .grid закончился там, где закончился родитель.
То что в него не поместилось - выпало.
Если я добавлю какой-нибудь width:fit-content к контейнеру, то все будет окей
Зачем задавать высоту родителю, если нужно, чтобы он растягивался по содержимому?
Зачем задавать родителю overflow, если нужно, чтобы то, что выпало не обрезалось, а как раз таки охватилось родителем?
Зачем задавать свойства непригодные для решения задачи, а потом удивляться, что они работают не так?
Ваш редактор не понимает свойств для грида с префиксами -ms и вы всерьез считаете, что это проблема грида, css и scss?
Разумнее поставить к вопросу тег VS Code, а остальные стереть.
А ещё лучше писать это Микрософту.
Только в данном случае, я думаю, что ответ будет чем-то вроде "ИЕ ушел и учить редактор понимать какие-то допотопные костыли не имеет смысла"
Короче, если вам нужна поддержка гридов в ИЕ, не смотрите на подчеркивания.
А теперь попробуйте самостоятельно, только так, чтобы была видна проблема.
90% за то, что пока делаете песочницу, найдете проблему.