33 replies

named grid lines not working as expected

Hey, this is one of my first times using grid lines properly for a layout and i can't quite seem to get the layout to look like the sketch in the image with them like i can do when defining the set lines the children go on e.g.

grid-row: 1 / -1;

grid-row: 1 / -1;

. The chidren don't seem to be sitting in their defined areas for some reason. For anyone wondering why i can't group the button in with the text, the layout shifts around at a desktop viewport, this layout is for a tablet viewport. Could anyone please point me in the right direction and let me know what i'm doing wrong? Thanks in advance.

https://codepen.io/deerCabin/pen/gONNKLy