Single Price Grid Component

This will be the biggest problem:

.main__wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

By positioning the whole page content absolutely you are taking it out of the document flow, so none of its size is considered on the page.

You definitely don't want a height and width on that grid either. Once the above is fixed, you shouldn't need them. Just a max width that's all.

I hope these pointers help

@grace-snow

I knew it was not completely ok, so I did so more research and decided on:

.main__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100vh;
  align-items: center;
  justify-items: center; 
}

converted all width / height values to max-values and the component still seems fine to me!?

@Drallas why would you want rows to be 100vh??

You don't need any widths and heights, just let the grid template manage everything

@grace-snow

grid-template on .grid-container is setting the values now...

Don't know yet how to get rid of grid-template-rows: 100vh on the .main__wrapper, without it's not vertically aligned..

@Drallas oh you mean on how you're centering on the page? I normally just use display grid place content center, no template rows or columns needed. Maybe that depends on whether it's also min-height 100vh... 🤔 Or maybe I put that on the body... I can't even remember what I do now it's just automatic 😂

@grace-snow directly height: 100vh; on the .main_wrapper seems to work. Thanks for your tips and time!

@pikamart Yes if the design doesn't specify it, I'm also inclined to just go for a copy.. But when such component end up in a page, it might be more responsive. I'm still finding out what the best practices are.