Как сделать резиновое CSS Grid горизонтальное меню независимо от количества элементов?

Question

[Dimka5]

Есть такой код

<ul class="горизонтальное_меню">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
  <li>Пункт 4</li>
  <li>Пункт 5</li>
  <li>Пункт 6</li>
</ul>

body, ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.горизонтальное_меню {
  width:100%;
  background-color:#F00;
  height:40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 20%));
}

.горизонтальное_меню > li {
  background-color: rgba(0, 0, 0, 0.3);
  line-height: 40px;
  text-align: center;
  white-space: nowrap;
}

.горизонтальное_меню > li:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

Это меню рассчитано на 5 элементов, когда я добавляю 6-ой он съезжает на 2 ряд, что мне не нужно.
При этом если уменьшать ширину страницы то верхний ряд ведёт себя как нужно, плюс если для ширины меню не хватает места, появляется горизонтальная полоса прокрутки, что мне и нужно.

Если в свойстве "grid-template-columns" заменить 20% на auto, пока элементы могут быть больше 100px всё отлично, если сузить страничку, то они начинают съезжать в ряды ниже, мне это не нужно, нужен железно 1 ряд.

Как сделать резиновое CSS Grid горизонтальное меню независимо от количества элементов и не зависеть от высчитывания 20%, т.е. (100% / (количество элементов в меню))?

Flexbox и JS не предлагать, нужен Grid.

Answer 1

[Рома Зварич]

Как сделать резиновое CSS Grid горизонтальное меню независимо от количества элементов?

Задать размер для автоматически добавляемых колонок через grid-auto-columns: minmax(100px, 20%); и добавление новых элементов в колонки через grid-auto-flow: column;

Можете добавлять сколько угодно колонок

Результат:
https://codepen.io/hisbvdis/pen/pozwKmX

Comments

[Dimka5]

Спасибо! То что нужно!