Clever way to use grid instead of position absolute in a common layout pattern
Hey people!
I have this common layout patter that I almost aways create with absolute positioning the image on the right.
But this makes the responsive part of it harder and more verbose, I was wondering if there is some more cleaver way of doing it, maybe with grid?
I can easily position it with grid using something like:
but this way my container gets all the height, and since the container is where the
background-color
is I don't get the "overflow visible" effect of the layout
suggestions?
thanks!4 Replies
Float could work here, since you want the image to be beside the text
hey @13eck, thanks for the suggestion but I think float will make everything even more complex to handle, I basically don't use float since flex/grid
does it make it more complex? https://codepen.io/jochemm/pen/abPqBRB
cool!
but I still need to use some padding on the text, calculate the "exact" breakpoint where the image needs to go down (or to the side if mobile first), reseting the padding and so on, that's the kind of complexity I was trying to avoid.
is the same if I use a position absolute on the image, the space gets "hard coded" to some breakpoints etc.
I was wondering if there is a more "let the browser handle those problems" approach