I would like to change the number of items per row, depending on the size of the card (or the size of the screen, at least).
Right now it’s fixed on 4 items and the items shrink in size. But YouTube has an interesting behavior of adjusting items per row that I would like to mimic on this page.
If you use the display: grid option on a div, you can dynamically generate the columns and rows. So you could generate it entirely dynamically. E.g 1fr 1fr 1fr with JavaScript. The columns are oudated, I wouldn’t use them anymore.
You saved my life once more, @Broberto 
I actually ended up simplifying and doing it only with CSS, but using the div instead of column was essential. Thank you!
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)) !important;
grid-auto-flow: row !important;