Menu
Components & UI
CSS Image Gallery
Grid layouts for images.
1Simple Grid
Use CSS Grid for robust galleries.
Example Code
css
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}2Understand it in a real interface
A gallery needs a layout rule and an image rule. The layout controls how many cells fit; the image dimensions and object-fit control the crop within each cell. Consistent ratios help scanning, but a forced crop may remove information from a photograph.
3Try it yourself
Create three images with different source ratios and place them in a responsive grid. Compare natural image heights with a shared aspect ratio. Inspect each crop on a narrow screen and choose alternative text according to what the image contributes.
Finished reading?
Mark this topic as complete to track progress.