Responsive 3-column preview card layout using CSS Grid

Community feedback

• 

  Kingsley Agu•285

  @didyouseekyngPosted over 2 years ago

  Hey bro, How you doing? You've done a great work attempting this challenge.

  .cards{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }

  1. I think this gap of 20px is not necessary on the card as a whole, so the card1, card2 and card3 would merge.

  2. I also noticed that on mobile, the cards don't have a margin which I suggest you add.

  3. From what I learnt from a few mentors here on FEM, I think the display:flex, align-items: center, justify-content: center and min-height: 100vh does the centering trick. You can apply it to the body or the card. Just work your way around and see which one works well for your code.

  4. Also learnt from others too that it's not best practice to actually have more than one h1 tag in your code. I do hope you find this helpful. Cheers bro! Anticipating your feedback.

  0