Kevin Powell - Community•3mo ago

Issue With Layout

I have issue with layout Anybody knows how can I achieve this layout I have one parent and multiple child 1: Parent has display grid 2: I want repetition in this manner > 3 child then 2 child then 3 then 2 and goes on in same manner. 3. All the child has same classes.

7 Replies

clevermissfox•3mo ago

Your grid template should have 3 cols then 4th and 5th children will span 1.5 columns. Actually now that I'm saying that give it a try but not sure if you can use floats woth the span keyword. If that doesn't work then you'll need 6cols and all children will span 2 except 4th and 5th will span 3.

Chris Bolson•3mo ago

I would go with the 6 columns option and a nth-child selector for the 4th, 5th, 9th,10th etc elements.

MarkBoots•3mo ago

here the selectors you could use

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.item {
  grid-column-end: span 2;
}
.item:nth-child(5n + 4), 
.item:nth-child(5n) {
  grid-column-end: span 3;
}

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.item {
  grid-column-end: span 2;
}
.item:nth-child(5n + 4), 
.item:nth-child(5n) {
  grid-column-end: span 3;
}

clevermissfox•3mo ago

I’m not currently able to experiment for another twelve hours or so but now I’m curious if you can use span 1.5; do you know if that would work Chris?

Muhammad AwaisOP•3mo ago

@MarkBoots I will apply your solution, let’s see what happens

Tok124 (CSS Nerd)•3mo ago

You cannot span 1.5

Mannix•3mo ago

god i suck with the nth-child selector I pretty much came up with the same solution as Mark but couldn't figure out a way to select every 4th and 5th element 😂 😭

Gaming

Programming

Issue With Layout