HTML and CSS (Grid & Flexbox)

Community feedback

• 

  Ramsay Sewell•585

  @ramsaysewellPosted over 4 years ago

  Hi Hendra, Great job on this solution, desktop looks great.

  I’ve just been fiddling around with the properties of the solution for a few minutes now and I think that using the template-areas doesn’t give the best method to responsiveness and using grid-template-columns: repeat(auto-fit, 340px) would allow the content to flow better.

  • Remove the title container from the grid container as this can be styled differently. With this, you will find the responsiveness a lot easier to work with
  • I would contain the orange and red card in their own “middle”. So the content flows as such: CYAN and ( ORANGE and RED ) and BLUE instead of CYAN and ORANGE and RED and BLUE (let me know if this doesn’t make any sense).
  • Change justify-items: center; to justify-content: center; too, so that it centers in the page.

  I've recorded what the layout should look like once these changes have been made: https://imgur.com/a/B0tQhzi

  I really hope this helps you out somewhat!

  1

  ---

  

  Hendra Agil Syaputra•135

  @hendra-agilPosted over 4 years ago

  @ramsaysewell That was very helpful for me, thanks for your feedback on my solution

  Thank you very much

  1