3-column preview using Grid

Community feedback

• 

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  To center all your content in the center of the page:

  1. It needs to be in one div.
  2. Put display: grid, align-items:center, justify-content:center, height: 100vh on the body tag. That will put your content in the center of the page.

  Marked as helpful

  1
• 

  Shreyas K R•60

  @ShreykrPosted almost 3 years ago

  I suggest you refer to the plenty of videos and resources out there.

  The simplest way I find (without using grid) is to use flexbox, justify-content: center, and align-items: center, on the element wrapping all the child elements.

  0

  ---

  

  Walid Mostafa•200

  @wella4lifePosted almost 3 years ago

  @Shreykr but grid doesn't center your entire content in the middle of the page.

  I think the only thing coming close to being able to do that is translate. and it sometimes is a little weird when it comes to different margins

  0

  

  Shreyas K R•60

  @ShreykrPosted almost 3 years ago

  @wella4life

  https://www.freecodecamp.org/news/how-to-center-objects-using-css/#:~:text=How%20to%20center%20a%20div%20horizontally%20%26%20vertically%20using%20CSS%20Grid

  Do refer to this. Also, what David said in the other comment.

  0