How to limit number of columns of card-deck?

Question

This is my code, what I want to achieve is only four columns in a row, and no more or less than that, but currently, the number of cards range from 1-10, they keep compressi

Answer 1

  

    
    

      
Card title
      
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
      
Last updated 3 mins ago
    

Add your cards under a section called card-deck and then use these css properties : Just an example. Edit the value as you want.

.card-deck{
    margin-top: 10px;
    margin-left: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-gap: .5rem;
}

Reference1: https://www.w3schools.com/cssref/pr_grid-template-columns.asp Reference2:https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns