Single price grid component Using HTML & CSS

Community feedback

• 

  Djamel1133•880

  @Djamel1133Posted 24 days ago

  Thank you for this information. Now I see better. I appreciate your feedback...Salam

  Marked as helpful

  1
• 

  Djamel1133•880

  @Djamel1133Posted 25 days ago

  Hi again,

  I hope you are doing well.

  I reviewed your solution, and as usual, you are 👍. I just have a quick question: to center your container place-items: center in your grid work or not ?

  To center your container, you used:

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  

  Another solution is to use Flexbox like this:

  /* parent (body or another element) */
  parent {
      height: 100vh;           
      display: flex;
      align-items: center;  
      justify-content: center;
  }
  

  Sory for my little english

  Take care, and see you soon, inchallah. Thanks!

  Marked as helpful

  1

  ---

  

  Yacoub AlDweik•990

  @YacoubDweikPosted 25 days ago

  @Djamel1133

  Hey how is it going!

  (place-items: center) would work only with the parent of the container which is the body element here, also as you know you should give the body display flex or grid with a height of 100vh in order to align the container in x & y planes.

  I think you see now how much complex it is to align using grid or flex in this case, when I want to align items inside a container I indeed use flex or grid but when I want to do that for a whole container inside a body then I use position absolute, other advantages for why I'd rather using position are like:

  • Simplicity: This method involves fewer lines of code compared to setting up Flexbox or Grid properties, making it quick and easy to implement for simple centering needs.

  • Cross-browser Compatibility: This technique is well-supported across various browsers, including older versions, ensuring consistent results without the need for vendor prefixes or workarounds.

  • Consistent Centering: The combination of top: 50%; left: 50%; positions the element's top-left corner at the center of its containing element, and transform: translate(-50%, -50%); moves the element back by half of its own width and height, effectively centering it perfectly both horizontally and vertically.

  • No Parental Constraints: Unlike Flexbox or Grid, where the parent container's properties can affect the child element's positioning, absolute positioning allows the element to be centered independently of its parent's layout.

  1