Skip to content
Submitted about 2 years ago

Single price grid component

Benedict Chima Ogbulachi•60
@BenChi3D
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

I learned and practice the grid layout system of the CSS Grid. grid spacing gave me a tough positioning time but eventually I got a grip of the positioning.

I used margin and padding to center my grid to the page.

Community feedback

  • Mahdi Rezaei•500
    @MahdiSohailyPosted about 2 years ago

    Your solution looks great but, in order to position the content in the center. you can use the justify-content: center property of grid or flex.

    for this, you have to define the container of your card as a grid or flex element and add the mentioned property to it. for your solution, you can use the following peace of code. remove the padding-left and margin-top properties and instead add the following code to the .content class.

    justify-content:center;
align-items:center;

    if it was helpful, mark my comment as helpful.

    Marked as helpful
    1
    Benedict Chima Ogbulachi•60
    @BenChi3DPosted about 2 years ago

    @MahdiSohaily thank you, I will do that. That is the problem I am facing on centering.

    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