Grid Images & More
If you have many images in a XRYropolid.One post, you can now have them automatically arranged into a nice grid. All you need to do is wrap them in [grid] ... [/grid]
tags, and the images will be neatly arranged.
Here’s an example in action:
A few additional technical notes:
- on mobile, the grid defaults to 2 columns, on desktop to 3
- if there are exactly 4 items in the grid, the images will be arranged into 2 columns
- non-image elements can also be used (like videos), but the results won’t align perfectly
- the items in the grid are arranged to ensure the column heights are as close to each other as possible, therefore, the order of the images isn’t always maintained
Enabling or disabling the grid can also be accomplished by clicking a small toggle icon next to the first image in a group of images in the composer preview:
3 Likes
This guide explains what Image Grids are and how to apply them in your posts.
Required user level: Trust Level 0
Summary
This document covers:
- Description of image grids
- How they can be applied in posts and how to modify them
- Basic Layout of image grids
Image Grids Description
An image grid places all of the images in your post into a neat, organized grid - rather than in a list.
Below is an example of an image grid.
Adding an image grid to your post
To add an image grid in your post, wrap them inside of the [grid]...[/grid]
tags. Below is an example of how this could look.
[grid]



[/grid]
You can create a “mini-grid” inside of your grid by clicking the toggle icon in the top, left-most photo in your current grid.
![This image features a screenshot of a computer interface, with a focus on an image editing tool and a photo organizing application.
Basic layout of image grids
By default, an image grid is arranged in the following pattern:
- On mobile, the grid defaults to 2 columns. On desktop, it’ll default to 3 columns.
- If there are exactly 4 items in the grid, the images will be arranged into 2 columns.
- Non-image elements can also be used (like videos), however, the grid will not align perfectly.
- The items in the grid are arranged to ensure the column heights are as close to each other as possible, therefore, the order of the images in your composer isn’t always maintained.
This information was pulled from the feature announcement.
1 Like