Здравствуйте, подскажите каким образом можно дополнить стили, чтобы пагинация не ломалась при уменьшении ширины экрана?
Сейчас выходит следующее:
а хотелось бы добиться такого результата:
Второй пример я получил при добавлении 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;
}
Комментариев нет:
Отправить комментарий