Есть такой код
<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.
Простой
