Which CSS property is commonly used to make gallery images display in a grid layout?
Analysis & Theory
`display: grid;` allows you to lay out gallery images in rows and columns.
Which CSS property allows spacing between images in a grid gallery?
Analysis & Theory
`gap` is used in CSS Grid and Flexbox to add spacing between grid items.
Which CSS property is commonly used to scale images on hover in a gallery?
Analysis & Theory
`transform: scale(1.1);` is used to zoom in images slightly on hover.
What CSS property is needed to animate zoom effects smoothly on image hover?
Analysis & Theory
`transition` provides smooth animations when an image changes on hover.
How do you make images fit perfectly inside their grid containers without distortion?
B
background-size: contain;
Analysis & Theory
`object-fit: cover;` makes the image cover the container while maintaining aspect ratio.
Which CSS property ensures images in a gallery don’t overflow their container?
Analysis & Theory
`overflow: hidden;` prevents images from spilling out of their containers.
Which CSS layout is most suitable for a responsive image gallery?
Analysis & Theory
`display: flex; flex-wrap: wrap;` creates a responsive layout that adjusts to screen size.
What unit allows image galleries to be responsive and adapt to screen size?
Analysis & Theory
`%` units scale based on the parent container’s width, making galleries responsive.
How do you center all images in a gallery using Flexbox?
A
justify-content: center;
D
align-content: flex-start;
Analysis & Theory
`justify-content: center;` centers all flex items horizontally.
Which CSS technique is best to create equal-sized image columns?
C
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
Analysis & Theory
CSS Grid with `auto-fit` and `minmax()` creates responsive equal-sized columns.