Is it possible to make every second row in a CSS Grid to have different number of columns?

Ask a question
5

I have a container with an unknown number of children (dynamically populated). I’m using this code on the parent container:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-row-gap: 10rem;
}

Is it possible somehow to make it so that every second second row has 4 columns instead of 3, so I would end up with something like this:

 A B C
A B C D
 A B C
A B C D
 A B C
A B C D

I’ve tried various methods but nothing really seemed to work.

Edit: maybe my question is not clear enough -> I have only a single container and random number of divs with the same class name which are container’s direct children. The nth-child(2n) doesn’t work in this case because I need every 4th element the columns to switch from 3 to 4 and vice-versa.

offer bounty
add comment

1 Answer

2

you can specifie the width of each children the first 3 have 33.33% and the seconde 4 have 25%

add comment

Your Answer