Kevin Powell - Community•9mo ago

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!

4 Replies

13eck•9mo ago

Float could work here, since you want the image to be beside the text

duruiz•9mo 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•9mo ago

does it make it more complex? https://codepen.io/jochemm/pen/abPqBRB

duruiz•9mo 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

Gaming

Programming

Clever way to use grid instead of position absolute in a common layout pattern