@Dimka5

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

Есть такой код
<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.
  • Вопрос задан
  • 3807 просмотров
Решения вопроса 1
Как сделать резиновое CSS Grid горизонтальное меню независимо от количества элементов?


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

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

Результат:
https://codepen.io/hisbvdis/pen/pozwKmX
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы