Image Grids

Community wiki Users
1

:bookmark: This guide explains what Image Grids are and how to apply them in your posts.

:person_raising_hand: 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.

Delta A321-200 Landing in Washington
Delta A321-200 Landing in Washington1750×981 89.7 KB

Delta Air Lines A321 Parked at Detroit
Delta Air Lines A321 Parked at Detroit1695×1257 272 KB

The Disney Wonder pulling into port at the Port of Vancouver
The Disney Wonder pulling into port at the Port of Vancouver1695×1271 442 KB

A large commercial airplane with a red, white, and blue tail on a runway, ready for takeoff. (Captioned by AI)
A large commercial airplane with a red, white, and blue tail on a runway, ready for takeoff. (Captioned by AI)1920×1323 134 KB

This image displays how to enable a grid using the top, leftmost image.
This image displays how to enable a grid using the top, leftmost image.1917×1010 73.6 KB

Delta Air Lines CRJ200 landing in Salt Lake City.
Delta Air Lines CRJ200 landing in Salt Lake City.1280×872 63.9 KB

Delta Air Lines A320-200 departing Minneapolis - St. Paul.
Delta Air Lines A320-200 departing Minneapolis - St. Paul.2000×1333 102 KB

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]
![Image showing how to make a mini-grid inside of your grid.|690x363](upload://wsGrbtQSbwfrs945kFVFZzK94zj.jpeg)
![The image shows a large white Delta airplane taking off from an airport runway.  (Captioned by AI)|690x470](upload://nqFYUjIWIFGYgMNQ3WB2LBLjOgs.jpeg)
![An image of a large commercial passenger airplane in flight.  (Captioned by AI)|690x459](upload://29xpH4eiMUpwx0xBMQB2wyPM5A9.jpeg)
[/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. (Captioned by AI)
This image features a screenshot of a computer interface, with a focus on an image editing tool and a photo organizing application. (Captioned by AI)1209×498 162 KB

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.

Related Theme Components

This is included by default in your forum. There are additional theme components related to this feature.

Additional Resources

11 Likes