Kevin Powell - Community•14mo ago

CSS Grid question - moving children to appear in 1st row

Hi all, just a vanilla grid question, I would like to move 1st and 3rd child to render at the top (1st row) instead of rendering in the bottom (2nd row). So everything should stay the same but the top row's gap should be used by left and right child instead of spilling onto the new rows, if that makes sense? I can't provide codepen because the code is not readable (Magento2 Hyva + Tailwind stack), the children are actually nested in separate PHTML files and grid is just wrapping over them, if that makes sense. I have applied a bunch of Tailwind breakpoint specific classes to get it to current state. I somehow believe that I'm missing a simple trick to just tell 1st and 3rd child to use the available space in 1st row above them.

1 Reply

MarkBoots•14mo ago

without seeing the html and css

.parent > *:nth-child(1),
.parent > *:nth-child(3){ 
  grid-row: 1;
}

.parent > *:nth-child(1),
.parent > *:nth-child(3){ 
  grid-row: 1;
}

` but normaly, the first and third child should already be in the first row of a 3 column grid otherwise, copy the rendered html via the browser inspector to codepen with the relevant css

Gaming

Programming

CSS Grid question - moving children to appear in 1st row