KPC
Kevin Powell - Community•16mo ago
duruiz

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: 
// container (with backgrond/padding/border-radius/etc)
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(5, 1fr);

// the text box
  grid-column: 1 / span 3;

// the image as background of this element
  grid-column: 4 / span 2;
  grid-row: 1 / span 2;
// container (with backgrond/padding/border-radius/etc)
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(5, 1fr);

// the text box
  grid-column: 1 / span 3;

// the image as background of this element
  grid-column: 4 / span 2;
  grid-row: 1 / span 2;
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!
No description
4 Replies
13eck
13eck•16mo ago
Float could work here, since you want the image to be beside the text
duruiz
duruizOP•16mo ago
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
Jochem
Jochem•16mo ago
does it make it more complex? https://codepen.io/jochemm/pen/abPqBRB
duruiz
duruizOP•16mo ago
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

Did you find this page helpful?