Как сверстать такую кнопку?

Илья Салигжанов, вряд ли я писала это о свежем вопросе..

Как сделать независимые друг от друга блоки?

Андрей, не поможет, столбцы будут перестраиваться при открытии блоков.

Что не так с вёрсткой кнопок?

NATASHA_PULIMET,

у меня подключен reset файл, поэтому я не обнуляю некоторые стили в css. В частности стили списка.

Отлично. Кроме того, что reset устарел очень давно, ещё до того, как устарел классический normalize.
Теперь вместе со всем, что касается вопроса, нужно сделать песочницу с видимой проблемой.

Пока делаете песочницу, имеет смысл переверстать всё на флексы с gap. Потому что вот это .switch__filter li+li ещё как-то можно было оправдать 10 лет назад (и то с трудом).

А вопрос отредактировать без необходимости использования ##. Иначе у него есть большой шанс быть удаленным.
Также указать, что значит "едут при малейшем изменение экрана". При том коде, который вы показали, они могут только переноситься на следующую строку и выстраиваться в соответствии с отступами, которые вы задали.

Как сверстать такую кнопку?

Илья Салигжанов, комментарий нельзя отметить решением, только ответ.

Как сделать независимые друг от друга блоки?

Идея давать ссылку на гугл драйв вместо песочницы сама по себе великолепна, отсекающая добрых две трети изначально желающих вам помочь.
А ссылка без доступа это просто шедевр.

что тоже логично для гридов

Угу. Это действительно логично.
И вы в шаге от решения: не надо использовать гриды для этой задачи.

Какой display задать, чтобы получилась вот такая колонка?

Разбираться с простыней ненужных стилей при отсутствии разметки не очень хочется.
Нормально: показать как надо и как выходит (с этим ок) и сделать песочницу только с тем кодом, который нужен для описания проблемы и так, чтобы эту проблему было видно в песочнице.

Что можно сделать:
1. Проговариваете словами на родном или удобном языке что и какого размера должно быть.
2. Обводите элемент и его дочерние цветными рамками. И смотрите что и кому вы поназадавали.

outline: 1px solid #f005;
  outline-offset: -1px;

Цвета лучше использовать полупрозрачные, чтобы было видно наложение.
Либо пользоваться девтулзами, он тоже прекрасно подсвечивает флекс и грид сетки.

Как понять откуда лишнее пространство у страницы?

Антон Антон, модифицировать

*, 
*::before, 
*::after {
  outline: 1px solid #f005;
  outline-offset: -1px;
}

Будет получше.
Также можно псевдики покрасить в другой полупрозрачный цвет. Будет ещё полегче.

Как сверстать такую кнопку?

И вам бы уже как-то научиться взаимодействовать с теми кто пытается вам помочь. Полно вопросов без отметок решениями или вообще полный игнор.

Как сверстать такую кнопку?

Проще всего прибить псевдоэлемент.
Альтернатива - clip-path, но в данном случае это лишнее.

Что именно у вас не получилось?

Не выставляются карточки с помощью gap так как надо?

Свойство gap работает не так как надо

На обоих скриншотах одинаковый gap и по виду очень похож на указанные 30px.
А больше он ничего не делает.

прикладываю скриншоты того как должно быть и как сделалось.

Но вы вообще шикарны. Скриншоты есть. На как узнать который какой?

Волшебный шарик предполагает, что второй, тот который в два столбца, тот правильный.

Как изменить CSS в карточке товара?

Конкретно в этом случае вам, возможно, поможет неразрывный пробел после 10  . Но зависит от обработки этого поля, может вывести и прям кодом. Но не поможет для товаров с другим количеством символов.

Здоровое решение задачи описано в ответе alexalexes.
Т.е. нужно завести ещё поля и разделить сущности.

Дурацкий вариант: вставлять в текст какой-то разделитель, а при выводе превращать его в теги.

Как центрировать div в зависимости от ширины дочерних элементов?

Антон Антон, я для ТС написала

Не удается экспортировать файлы из Figma?

lordmaliss, тут принято отмечать ответы решениями

Как в пагинацию swiper добавить текст?

https://swiperjs.com/demos#thumbs-gallery

Как центрировать div в зависимости от ширины дочерних элементов?

Lomoson, дети флексов не могут быть float, так что у item его (float) точно можно убрать. И не уверена, что он нужен для content, но макета нет.

Webstorm убирает табуляцию при форматировании?

Ivan Tumanow, тогда норм, но комментарий оставлю, чтобы поменьше разработчиков так писали.
Этот автоматический код, кстати, тоже настраивается.

Фронтенд - дизайн или программирование?

Не хотите дизайнерить ни в каком виде, найдите команду, где у вас будет дизайнер-нянька, который будет отрисовывать и объяснять как всё должно выглядеть. Я без сарказма, если что.

Slick slider, как центрировать один слайд?

У swiper точно можно ставить, например, 1.8
У слика не помню, попробуйте.

Как сделать валидацию очень сложной формы?

szQocks, если связать атрибутами, то всё норм.
Если вообще без кнопки или несвязанная, то да, текстообразное только одно.

Как сделать валидацию очень сложной формы?

szQocks,

не нужно кнопку выносить за форму, потому что иногда люди и на enter любят нажимать

Отсутствие кнопки или кнопка снаружи формы никак не мешают отправке по энтеру.

Хорошо бы ещё связать кнопку с формой нормально, через атрибуты, а не вот этот онклик.