Build a modern gallery with CSS Grid, stable cropping and accessible micro-interactions, so image collections stay clean across different screen widths and mixed source formats.
Let the grid adapt instead of micromanaging every breakpoint.
Use a minimum card width and let the browser calculate how many columns fit in the available space.
Keep the gap consistent and avoid fixed image tile widths unless the design really depends on them.
Mixed source images still need one stable visual rhythm.
`aspect-ratio` defines the media frame, while `object-fit: cover` tells the browser how to crop the image without distorting it.
You can also add an overlay on hover for a title or action affordance without pulling extra JavaScript into a relatively simple pattern.
Sometimes the goal is not just listing images, but constructing a continuous visual surface.
Some galleries behave almost like a backdrop or a visual mosaic. In those cases, the number of cells and the rhythm of the layout matter as much as the individual images themselves.
Grid can define the structure while `background-size`, `background-position` or `aspect-ratio` maintain consistency. If the gallery must fit an exact set of images across the whole viewport, a tiny amount of JavaScript can calculate the distribution while CSS still owns the cropping, spacing and hover states.