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
without seeing the html and css
`
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