Div and Img layering within a grid

Hi y’all, I’m creating a layered div and image in a grid system. I have this look built out as an image, but I now would like to move on where the filled-in square div and the layered image are independent of each other. Some problems I’m running into:

  1. Div won’t stay as square responsively.
  2. Image and div don’t responsively size together.
  3. Can’t get the picture to lay on div correctly.

I’ve been on the forum for a while and watched a lot of videos, and I’m not sure what I’m doing wrong. I made the div 40vw,40vh, and made the image relative floating to the right.

All of the images with gradient boxes are the image ones I imported. The last one with the solid green is the one I’m trying to replicate with the div and image.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi Meaghan,

It is not a complicated layout so you could use flex or grid, but that is not your question.

I would create grid areas. You can then assign the image and colour div to respective grid areas. Align the image to one side and the colour div to the other. Grid areas will greatly improve your ability to work with grid through the breakpoints without having to revert back to flex which then requires more divs / additional structure. You do this by removing grid columns and or dragging the grid area over a larger span of cells or whatever you decide to do really!

Anyway checkout grid areas. Hope that is clearer than mud!