--- title: "Gallery element: show images in a grid" description: "Display several images in a regular grid at the same size, ideal for a portfolio, a collection of work or a mosaic of inspiration." url: https://docs.vivlab.com/en/editor/menu/gallery --- # Gallery The **Gallery** element displays several images in a regular grid, all in the same format. It's the ideal block to showcase a portfolio, a collection of work, photos of a place or an event, or a mosaic of inspirations, without having to align each image by hand. ## Gallery The side panel lists the gallery's images, in the order they appear on the page. - Click **Add an image** to insert an empty slot to fill, or **Import multiple images** to upload a whole batch of photos at once, handy for a gallery of several dozen images. The import fills any empty slots first before creating new ones. - Drag an image by its handle to change the display order. - Each image's menu lets you **Duplicate** or **Delete** it. Click an image in the list to expand its settings: - **Image**: drag and drop or click to upload a JPEG, PNG, GIF, WebP or AVIF file. Once the image is loaded, the **Change image** button lets you replace it, and the frame shown above lets you drag the image to choose which part stays visible in its cell, useful since each image is cropped to fill its whole cell. - **Alternative text**: a short description of the image, used by search engines and screen readers to improve SEO and accessibility. This text also serves as the caption when the **Show captions** option is enabled (see [Grid](#grid)). - **Add a link**: makes the image clickable. Set the click action: external link, internal page, anchor, email, phone, PDF, product or category. See the link options described for the [button](https://docs.vivlab.com/en/editor/menu/button.md). ## Grid The **Grid** section controls the layout of all the images at once. The images fill the block's height and are cropped to cover their whole cell, which keeps the grid perfectly regular even when your original files have different dimensions. To make the images larger or smaller, simply resize the block on the [canvas](https://docs.vivlab.com/en/editor/canvas.md). - **Columns**: the number of images per row. Set it separately for desktop and mobile (for example 3 columns on desktop and 2 on mobile). - **Horizontal spacing**: the gap between columns, in pixels. - **Vertical spacing**: the gap between rows, in pixels. - **Show captions**: displays each image's **Alternative text** as a caption, right below it. Be sure to fill in this text for each image before enabling the option. ## Style The [style panel](https://docs.vivlab.com/en/editor/style/index.md) gathers the [text style](https://docs.vivlab.com/en/editor/style/text.md) of the captions, the [background](https://docs.vivlab.com/en/editor/style/background.md), [borders](https://docs.vivlab.com/en/editor/style/border.md), [corner radius](https://docs.vivlab.com/en/editor/style/border-radius.md), [shadow](https://docs.vivlab.com/en/editor/style/box-shadow.md), [inner margins](https://docs.vivlab.com/en/editor/style/padding.md) and [transitions](https://docs.vivlab.com/en/editor/style/transition.md).