Practice using CSS grid.

Community feedback

• 

  Joseph Uchechukwu Kingsley•120

  @KingsleyChukwuPosted 12 months ago

  Nicely done but I would suggest use the following code to center the body element..

  You first remove the position properties and the margin property from the .grid-container selector:

  .grid-container { position: absolute; right: 0; left: 0; top: 0; bottom: 0; margin: auto; }

  Then add the following properties to the body element..

  body { display: flex; align-items: center; justify-content: center; min-height: 100vh; position: relative; }

  Then you can use this for the footer:

  footer { position: absolute; right: 0; bottom: 0; }

  Marked as helpful

  1

  ---

  

  P

  Wannika123•650

  @Wannika123Posted 12 months ago

  @KingsleyChukwu Thanks for the comment, really appreciate it. At first, it didn't work with mobile version and the content stay on the left (it works fine with desktop, though). And now I realize that because the grid container is nested inside <main>, I simply need to set those properties to <main>.

  0