CODEWITHSUNDEEP
csscss-grid
MindPhuq
MindPhuq

Reputation: 107

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

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

Answers (2)

Temani Afif
Temani Afif

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

Devloop80
Devloop80

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

Related Questions