Hello, tell me how you can add styles to pagination does not break when reducing the width of the screen?

Now comes the following: enter image description here

But I would like to achieve this result: enter image description here

I got the second example when adding min-width: min-content; to the class .pagination__item

but on a wider screen, the last element does not want to move to a new line and it turns out like this enter image description here

 .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; } 
 <div class="pagination"> <div class="pagination__list"> <div class="pagination__item">1</div> <div class="pagination__item">2</div> <div class="pagination__item">3</div> <div class="pagination__item">4</div> <div class="pagination__item">5</div> <div class="pagination__item">6</div> <div class="pagination__item">7</div> <div class="pagination__item">8</div> <div class="pagination__item">9</div> <div class="pagination__item">10</div> <div class="pagination__item">11</div> <div class="pagination__item">12345678</div> </div> </div>

    1 answer 1

    You need to use the Flex box . Grid for this purpose is not suitable, as it assumes an equal size of cells in the column.

     .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; } 
     <div class="pagination"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>111111</div> <div>222222222</div> <div>333333333333</div> <div>44444444444444</div> </div>

    • the whole project is on grids, I would like to use them further, but if there are no options, I will use your example, thanks! - Maxim Zheleznyakov