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

#css #вёрстка #pagination #css_grid #пагинация

Здравствуйте, подскажите каким образом можно дополнить стили, чтобы пагинация не
ломалась при уменьшении ширины экрана? 

Сейчас выходит следующее:


а хотелось бы добиться такого результата:


Второй пример я получил при добавлении 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;
}

  

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9
    
10
    
11
    
12345678
  




    

Ответы

Ответ 1

Вам надо использовать 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;
}

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
111111
  
222222222
  
333333333333
  
44444444444444