My front makes an API request and retrieves a number of items. With these items a flex grid is built, for example like this:
It is a responsive web and I would like to always have 2 rows, regardless of the width of the screen and hide the remaining items. Something like this:
You could try using the :nth-child() selector on the child elements to select everything after the 6th child and set display to none. I am not that familiar with the :nth-child selector, but I made a quick version and it seemed to achieve the desired behaviour with the below CSS.
.flexbox>div:nth-child(n+7) {
display: none;
}