Discourse has added grid layout functionality available to all users. Users can add the [grid] and ‘[/grid]’ tags around images or uploads manually, or they can use an icon next to the first image in a block of images in the composer preview to toggle the grid on/off.
Images in the grid will align at both the top and the bottom of the element. 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
An example of six mixed size images:
2x2 16:9 uniform images:
