Skip to content
Submitted about 3 years ago

Single Price Grid Component (CSS Grid)

Corvida Raven•680
@SheGeeks
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What ways have you found and used to center a CSS grid container (vertically and horizontally) without using flexbox or getting that weird cutoff when the height of the browser is too small?

Community feedback

  • Account deleted

    You can center everything that is giving you a run around both vertically and horizontally, just by using margin & transform : translate() together... lets say you have a container, so it'll be;

    .container{ margin-left: 50%; margin-top: 50%; transform: translate(-50%, -50%); }

    This always works, & if you have your container in position : absolute you can use left instead of margin-left & top instead of margin-top.

    & btw your solution looks good.

    Marked as helpful
    1
    Corvida Raven•680
    @SheGeeksPosted about 3 years ago

    @thulanigamtee Thank you! Will give your suggestion a try on my solution later this week.

    If you're open to it, would love to get your feedback on my solution to the tip calculator challenge, particularly the block of code I mention in the feedback request area.

    0
    Account deleted

    @SheGeeks I'll look into it👍.

    0
  • darryncodes•6,370
    @darryncodesPosted about 3 years ago

    Hi Corvida,

    Great solution, well done!

    If you made the <body> a grid too this would work. This is one of the most comprehensive guides around. All the best!

        display: grid;
    justify-content: center;
    align-content: center;
}
    0
    Corvida Raven•680
    @SheGeeksPosted about 3 years ago

    @darryncodes Thanks for replying Darryn! I actually tried that first, but it wouldn't center vertically without a height and that leads to the container getting cut off at the top when the browser window is too small in height 🥴

    0
    darryncodes•6,370
    @darryncodesPosted about 3 years ago

    ah i see @SheGeeks min-height: 100vh; usually does the trick!

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord