Как сделать, чтобы при любом размере в родителе было только 4 кнопки в ряду?

Question

[Anonymous]

Кнопки оказались слишком большими, но хотят чтобы было только 4 кнопки в ряду. И чтоб поменьше были. Я уменьшаю кнопки и в итоге размер который от меня хотят, есть. Но! Становится тогда 5 кнопок, хочу как то сделать через flexbox, чтобы только 4 и только 4 кнопки были в ряду при любом размере.
Как можно такое реализовать?

Было в мыслях сделать div-обертку, задать им ширину по 25%, а внутри задавать кнопкам нужный размер. Но как оказалось, способ костыльный в моем случае.

Answer 1

[Виктор Майоров]

Используйте гриды :)

.wrap {
  display: grid;
  grid-template-columns: repeat(4, 320px);
  grid-gap: 15px;
  width: 100%;
}
@media (max-width: 648px) {
  .wrap {
      grid-template-columns: repeat(4, 1fr);
  }
}

Comments

[Anonymous]

1fr - как раз таки тут загвоздка. Мне надо, чтобы при любом размере кнопок было только 4 элемента в ряду. А тут ширина 1fr, и экран может быть допустим 1920x1080, и это будет выглядеть нелепо.

[Виктор Майоров]

Никита Савченко, Поправил ответ. media запрос поправь под себя.

[Anonymous]

Виктор Майоров, теперь годится, спасибо :)

Answer 2

[Senseich]

Как вариант, сделать такую сетку https://codepen.io/senseich/pen/GRXNerG/

Comments

[Anonymous]

Можете на кодепене, пожалуйста? Jsfiddle прекратил работу в РФ

[Senseich]

Никита Савченко, сделал на codepen

[Anonymous]

Senseich, оно не походит, вот допустим 10px пусть ширина будет и чтобы все равно было 4 в ряду. И все же, решение уже найдено.