Страницы

Поиск по вопросам

пятница, 17 мая 2019 г.

Вёрстка пагинации на гридах

Здравствуйте, подскажите каким образом можно дополнить стили, чтобы пагинация не ломалась при уменьшении ширины экрана?
Сейчас выходит следующее:
а хотелось бы добиться такого результата:
Второй пример я получил при добавлении min-width: min-content; к классу .pagination__item
но на более широком экране последний элемент не хочет переходить на новую строку и получается так:
.pagination { font-family: Tahoma; display: grid; grid-gap: 5px; grid-auto-flow: column; justify-content: start; grid-template-columns: repeat(auto-fit, minmax(32px, 1fr)); } .pagination__list { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, minmax(32px, min-content)); } .pagination__item { display: grid; align-content: center; justify-content: center; user-select: none; text-align: center; cursor: pointer; box-sizing: border-box; padding: 5px; border-radius: 3px; background-color: #ffffff; color: #444444; border-width: 1px; border-style: solid; border-left-color: #dbdbdb; border-top-color: #dbdbdb; border-right-color: #c4c4c4; border-bottom-color: #c4c4c4; }



Ответ

Вам надо использовать Flex box. Grid для такой цели не подходит, так как предполагает равный размер ячеек в колонке.
.pagination { display: flex; flex-wrap: wrap; } .pagination div { user-select: none; cursor: pointer; box-sizing: border-box; padding: 5px; border-radius: 3px; background-color: #ffffff; color: #444444; border-width: 1px; border-style: solid; border-left-color: #dbdbdb; border-top-color: #dbdbdb; border-right-color: #c4c4c4; border-bottom-color: #c4c4c4; margin: 3px; }


Комментариев нет:

Отправить комментарий