All comments

• 

  Kimball S Sumney• 120

  @ks5ks

  Submitted over 1 year ago

  Could this be done without using @media query by using display: grid?

  

  Product Preview Card Component

  1

  10

  

  Clark Tolosa• 530

  @clakr

  Posted over 1 year ago

  Hi! 🙋‍♂️ Congrats on completing the challenge.

  I've done this challenge through using display: grid on default (smaller screens / < 1440px) and providing grid-template-columns: on bigger screens, however this approach uses @media screen or basically media queries and if you want an alternative solution, there's that.

  However, if you don't want to use @media for whatever reasons, I suggest looking into @container queries, and these are some resources that are helpful.

  • Kevin's Powell YouTube video
  • Jack Herrington's YouTube video
  • Una Kravets' YouTube video

  The only caveat for this is, it's still in development for Firefox, Firefox for Android, and Samsung Internet, but it's fully supported by other modern browsers. You can look into @container's Browser Compatibility.

  If you have questions, concerns, feel free to bump me through this thread! 😁

  Marked as helpful

  0

  This comment has received 1 replyShow