# Image Grids

**URL:** https://meta.discourse.org/t/image-grids/329982
**Category:** Users
**Created:** [October 8, 2024, 11:31pm UTC](https://meta.discourse.org/t/image-grids/329982 "2024-10-08T23:31:27Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![HamMan2118](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hamman2118/32/383565_2.png) [@HamMan2118](https://meta.discourse.org/u/HamMan2118)
#### Post date: [October 8, 2024, 11:31pm UTC](https://meta.discourse.org/t/image-grids/329982/1 "2024-10-08T23:31:27Z")

</div>

> :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](https://global.discourse-cdn.com/meta/original/4X/c/5/5/c55be69a2a562f77e018108231ce4aa3cc431827.jpeg)  
 ![Delta Air Lines A321 Parked at Detroit](https://global.discourse-cdn.com/meta/original/4X/9/1/1/9117023939a27e01413ddbe5821296d5c74bae5b.jpeg)  
 ![The Disney Wonder pulling into port at the Port of Vancouver](https://global.discourse-cdn.com/meta/original/4X/6/2/6/626faa9df2c7a4e5884c43ec9a8f0cfd724f99c3.jpeg)

 ![A large commercial airplane with a red, white, and blue tail on a runway, ready for takeoff. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/c/c/5/cc57c91586e0385e90d3ce479449e6a311bca013.jpeg)  
 ![This image displays how to enable a grid using the top, leftmost image.](https://global.discourse-cdn.com/meta/original/4X/e/3/8/e383a5aa6bde868b709e00217dd6c0ba5d45b395.jpeg)  
 ![Delta Air Lines CRJ200 landing in Salt Lake City.](https://global.discourse-cdn.com/meta/original/4X/a/4/3/a435fdf10abcb44a576e78cf12e1064d3007bd3c.jpeg)  
 ![Delta Air Lines A320-200 departing Minneapolis - St. Paul.](https://global.discourse-cdn.com/meta/original/4X/0/f/1/0f18637c782e718ef83fc0633219a095c7eafd45.jpeg)

## 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.

```plaintext
[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)](https://global.discourse-cdn.com/meta/original/4X/0/3/2/032a687a158881905fa57b30200fc3925ebc115f.jpeg)

## 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](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664).

## Additional Resources

- [Introducing image grids in posts](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664)