How to create such a CSS Grid?

Question

css

Good day to all!



There is a similar structure, but now it is all very crutch and bad.
It is required to make sure that there are a maximum of 6 elements in the first row, if less, then they are evenly spaced in width, and after 6 elements, each next one has the width of the entire container, there can be a lot of elements, the main thing is that each next after 6 should go full width. I have already tried it through grid-area with grid-template-areas, and even returned to flex already, please help me find a solution.

Answer 1

I would do it on flex. all cards flex-grow: 1;
and cards nth-child(n+7) have a width of 100%. and other styles
other styles can be specified by adding an extra class as well. when integrating in a cycle, start a counter and after the 6th iteration add a new class to items