A single page 3 column grid layout using HTML and CSS flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Satyajeet! 👋

  To make the card vertically center (and horizontally center), I recommend making the body element as a flex container. I also highly suggest using vh unit for the min-height on the body element. This way, the cards would always be in the middle of the page regardless of the user screen sizes.

  I suggest never using % for margin and padding because % will make those values become too large or too small depending on the user screen size. Unlike width where there's max-width so, you can limit how much it should grow, padding and margin don't have max properties. So, my recommendation is to use the rem unit for margin and padding for the consistent result (and great for responsiveness as well).

  For responsiveness, I recommend writing the styling for the mobile layout first (known as the "mobile-first" approach). It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles. Also, for the media query units, I recommend using em unit for consistent results across multiple browsers. Here are the articles on both topics.

  • How To Write Mobile-first CSS | Zell Liew
  • PX, EM or REM Media Queries? | Zell Liew

  That's it! I hope this information is useful! 😁

  1