Reputation: 107
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.
Upvotes: 3
Views: 3936
Reputation: 274384
You cannot have different number of columns on each row because it would be against the purpose of a grid. Instead you can define a grid of 12 columns and then make your child to either take 3 columns or 4 columns:
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-column-gap:2px;
grid-row-gap: 5px;
}
.container > div {
grid-column:span 3;
height:40px;
background:red;
}
.container > div:nth-child(7n + 1),
.container > div:nth-child(7n + 2),
.container > div:nth-child(7n + 3) {
grid-column:span 4;
background:blue;
}
<div class="container">
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div>
</div>
If you want to have the same size you can try the following:
.container {
display: grid;
grid-template-columns: repeat(16, 1fr);
grid-column-gap:2px;
grid-row-gap: 5px;
}
.container > div {
grid-column:span 4;
height:40px;
background:red;
}
.container > div:nth-child(7n + 1) {
grid-column:3/span 4;
}
.container > div:nth-child(7n + 3) {
grid-column:span 4/-3;
}
<div class="container">
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div>
</div>
Upvotes: 6
Reputation: 323
Yes, use the .container childclass:nth-child(Xn)
Read about it here here:
A easier link: https://www.w3schools.com/cssref/sel_nth-child.asp More information: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
See an example here: https://jsfiddle.net/520Ltahd/
Use mathematics to find the correct formula for the sequence of boxes. Like this:
/*The row with 4 columns*/
.container div{
padding:20px;
display:inline-block;
width:25%;
margin:0px;
padding:0px;
background-color:blue;
}
/*The row with 3 columns*/
.container div:nth-child(7n-6),.container div:nth-child(7n-5),.container div:nth-child(7n-4) {
background: red;
width:33.333%;
margin:0px;
}
Upvotes: 1