ImagesLesson 61Free preview
Responsive Image Grid
This lesson is part of How To · All levels
Summary
The responsive image grid arranges many images in columns that adjust the screen width. CSS Grids with repeat(auto-fit, minmax(...)) can add or subtract columns automatically without much media query. object-fit and aspect-ratio keep each image neat in its cell.
Key points
- Grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) makes the column flexible.
- The gap gives us a consistent distance between images.
- Object-fit: the cover prevents the image of the plate when the cell changes size.
- The aspect ratio keeps the image high proportionally.
- Minmax sets the minimum and maximum width of the column.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.