CSS3 flexbox layout max 3 child items on one line

Question

Is their an simple way in CSS to have a fixed maximum of child items on the same line, before you push the next child elements to a new line?

Answer 1

Or you could use CSS Grid for this:

Your HTML:

Your CSS:

.parent {
    display: grid; // activate grid
    grid-template-columns: repeat(4, 1fr); //make 4 cols with size 1fr
    grid-gap: 20px; //gap between the rows
}
.child { //thats written with less. Just unnest for vanilla css
    &:nth-child(3n+1) {
      grid-column: 1;
    }
    &:nth-child(3n+2) {
      grid-column: 2;
    }
    &:nth-child(3n+3) {
      grid-column: 3;
    }
    &:nth-child(3n+4) {
      grid-column: 1; //put the fourth item in a new row
    }
}

I'm sure there are more efficient ways to write this with grid. But this does the job.