7. Responsive images in grid

Requirements

• Develop responsive grid with media cards using the display grid property
  • One column on mobile screens
  • Four columns on desktop screens (>= 1280px)
• All cards in one row should have the same total height
• Every card should have a preview area and optional content (text) area
  • The preview area should maintain 4:3 aspect ratio no matter the screen size
  • The preview area should work with inconsistent image sizes (any width or height)
  • The preview area should provide spacing between the image and the bounding box of the card
  • Any images placed inside the preview area should maintain their own aspect ratio
  • Any image smaller than the dimensions of the preview area should maintain his maximum width and height. (Make sure you add at least one small image)
• The design is meant to show an example of product grid with responsive images. You don’t have to follow it, feel free to style, add or remove any extra elements
• ⭐ Be creative with the background of the preview area. Feel free to experiment with colors and effects to make the space around the image and the image itself look good.

Design preview

Resources

• object-fit MDN
• aspect-ratio MDN
• Free images
• Placeholder images

Learn more

• Grid by example
• Learn CSS Grid
• Responsive image ideas

Discussion topics

• Lazy loading images
• Aspect ratio CSS property vs legacy approach
• Grid and grid template areas
• Adaptive grid and container queries
• CSS filter effects
• Different techniques when handling various size of images
• Potential bugs with grid and aspect-ratio