مولّد معارض الصور بالذكاء الاصطناعي.

Create a responsive image grid: four columns on desktop, three on tablet, two on mobile, with a consistent gap. Wrap each image in a 4:3 aspect-ratio box with object-fit: cover so the grid never reflows as images resolve, and set explicit width and height attributes on every img. Use loading="lazy" and decoding="async" on everything below the first row, and eager loading plus fetchpriority="high" on the first row so the largest contentful paint is not deferred. Add a hover state that lifts the tile slightly and fades in a caption over a gradient scrim; drive the same state from :focus-visible so keyboard users see it. Render each item as a figure with figcaption.

Create a masonry image gallery that preserves each image's native aspect ratio. Use CSS grid with grid-auto-rows set to a small row unit and a span calculated per item from its intrinsic ratio, rather than CSS multi-column, so reading order stays left-to-right and matches the source order. Set the aspect-ratio property on every image wrapper from the known width and height so the grid reserves the exact space before the file loads and nothing shifts. Three columns on desktop, two on tablet, one on mobile. Lazy load below the fold, add a blurred low-resolution placeholder that cross-fades to the full image, and keep a fixed gap on both axes.

Create an image grid where clicking a tile opens a full-screen lightbox. The overlay renders as a dialog with aria-modal, moves focus to the close button on open, traps Tab within the overlay, closes on Escape and on backdrop click, and returns focus to the thumbnail that opened it. Support left and right arrow keys plus on-screen previous and next buttons, show a counter such as 4 of 18, and render the caption beneath the image. Preload the neighbouring two images so navigation is instant, lock body scroll while open, and add touch swipe on mobile. Respect prefers-reduced-motion by dropping the zoom transition.

Create a filterable image gallery: a horizontal row of category chips above a responsive grid, with an All chip active by default and a count beside each label. Filtering hides non-matching items and animates the remaining tiles to their new positions with a transform-based transition rather than re-laying out abruptly. Reflect the active filter in the URL query string so a filtered view is linkable and survives reload. Use real button semantics with aria-pressed on each chip, announce the resulting item count in an aria-live region, and show an empty state when a category has no items. Keep the aspect-ratio boxes fixed so filtering never changes tile size.

Create a horizontal image carousel using CSS scroll-snap: a flex row with overflow-x auto, scroll-snap-type x mandatory and scroll-snap-align center on each slide, so native touch and trackpad scrolling work without a slider library. Sit a thumbnail strip beneath it where the active thumb is outlined and clicking one scrolls the main rail to that slide via scrollIntoView with smooth behaviour. Add previous and next buttons that disable at each end, hide the scrollbar visually while keeping keyboard scrolling intact, and give the rail a role and label so it is announced as a group. Fixed aspect-ratio slides, lazy loading past the second image.

Create an asymmetric mosaic gallery on a six-column CSS grid: the first item spans four columns and two rows, two items span two columns each, and the remainder fill single cells, with explicit grid-column and grid-row spans rather than auto-placement. Give every cell a fixed aspect-ratio box and object-fit: cover so the mosaic holds its shape at any image size. Collapse to a two-column grid on tablet and a single column on mobile, keeping the feature image first. Add a hover scrim with a title and a year, lazy load everything after the feature cell, and eager load the feature image so it can be the largest contentful paint.