Single Price Grid Component

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hey, Canti! 👋

  Congratulations on finishing this challenge! 🎉

  You have an interesting question. I never thought about how to center a div without using flexbox, grid, and position property. So, I did some research and it turned out that it is possible. You can use display: table to do it. But, keep in mind that I have never tried doing this so I am not sure it will work well. (reference: https://www.tutorialstonight.com/how-to-center-a-div-in-css#using-display-table-cell-v)

  But, I would recommend using either flexbox or grid. It's a more robust solution to center the card and also both have good support.

  • CSS Grid Layout | Can I use
  • CSS Flexible Box Layout Module | Can I use

  So, there is no reason to not use flexbox or grid. 🙂

  Taking a look at your solution, you use flexbox to center the card. However, I would prefer making the body element as the flex container and then making the main element as grid container.

  You can set the flex-direction to column to make the attribution below the card. For the main element, you can use grid-template-column to control the layout of the card.

  That's it! I hope you find this useful! 😊

  1
• 

  ...•600

  @HatimHJPosted over 2 years ago

  This comment was deleted over 2 years ago

  0

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @HatimHJ

  For the Markdown syntax for the link, you want to use the square brackets to wrap the text content and then wrap the URL with brackets.

  [example](https://www.example.com/)

  0