Как правильно такое сверстать?

Question

[mukzer]

Как правильно сверстать такое ( это табы ) что бы и при адаптиве выглядело как на скрине?



Вот такое я сверстал, но не пойму как сделать адаптив как на скрине выше ( при том что количество кнопок может изменятся )

Вот такое у меня получается при адаптиве...


codepen

Comments

[Владимир Юрченков]

А код то покажите?

[mukzer]

Владимир Юрченков, https://codepen.io/Mukzer/pen/vYRpGbO

[Сергей Сергей]

Через медиа-запросы, для меньшей ширины поменять правила и всё.

[mukzer]

Сергей Сергей, Количество таких кнопок может стать больше, и тогда медиа запросами не получится...

[Denis Melnikov]

я конечно не фронтовик, но гриды тут не в помощь ?
минимум 1 колонка
2 колонки и дальше максимум

[Сергей Сергей]

Существуют количественные порядковые селекторы :nth().

[mukzer]

Сергей Сергей, Я там оставил ещё пару скринов, не уверен что такое возможно сделать через :nth()

[mukzer]

Denis Melnikov, Гридами можно, но нужно как-то избавится от пустого места...

Answer 1

[Сергей Сергей]

Ограничение в фиксированных ширине и количестве табов.