Mobile first grid component with CSS Grid

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  Hey, Astrid! 👋

  Good job and congratulations upon completing your first Frontend Mentor challenge! 🎉

  Your solution looks good and responds well! 👍

  Your code looks nice, too. I just might only use an <article> tag for the entire component card and separate each section with <div>s (or perhaps <section>s, as yadprab suggested) since that better matches the purpose of those semantic tags.

  I think you might be able to use the auto-fit and auto-fill properties to create a responsive layout using CSS grid without using media queries, but since you only have two media queries in your solution, I think you're good!

  If you'd like to get even closer to matching the original designs (like you mentioned), check out PerfectPixel—a nice browser extension that lets you overlay images on your website so you can see exactly how your website lines up with the original design images. 😉

  Keep coding (and happy coding, too)! 😁

  1

  ---

  

  Astrid•100

  @astridvPosted about 4 years ago

  @ApplePieGiraffe wow thank you so much for both the useful response and the encouragement 😍 Will definitely look into auto-fit and auto-fill for future solutions 😄 PerfectPixel sounds like an absolute godsend 🙏 You won't believe how much time I spent staring at the design pics just to try and figure out the spacing, sizing etc. 🤦‍♀️😂 So I'll definitely have to check that out for future challenges!

  I wish you very happy coding as well 😄

  1
• 

  Yadhavan Prabhakar•460

  @yadprabPosted about 4 years ago

  nice work use section instead of div

  1

  ---

  

  Astrid•100

  @astridvPosted about 4 years ago

  thanks @yadprab, appreciate the tip! 😊

  1