SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Image Grid

This sample includes two formats to display images in Lists as grid - row formatter and tile formatter for Gallery view.

Get this format View on GitHub

Shared by Reshmee Auckloo, Valeras Narbutas
Updated Jul 30, 2025

Image Grid formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

2 definitions

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

View formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 150,
  "width": 160,
  "formatter": {
    "elmType": "div",
    "customCardProps": {
      "openOnEvent": "hover",
      "directionalHint": "rightCenter",
      "isBeakVisible": true,
      "formatter": {
        "elmType": "div",
        "txtContent": "[$Description]",
        "style": {
          "max-width": "300px",
          "padding": "10px",
          "background-color": "rgba(0,0,0,0.9)",
          "color": "white"
        }
      }
    },
    "style": {
      "width": "160px",
      "height": "150px",
      "margin": "5px",
      "border-radius": "8px",
      "box-shadow": "0 2px 5px rgba(0,0,0,0.15)",
      "position": "relative",
      "cursor": "pointer"
    },
    "children": [
      {
        "elmType": "a",
        "attributes": {
          "href": "[$URL]",
          "target": "=if([$NewTab],'_blank','')"
        },
        "style": {
          "text-decoration": "none",
          "display": "block",
          "width": "100%",
          "height": "100%",
          "color": "inherit"
        },
        "children": [
          {
            "elmType": "span",
            "style": {
              "position": "absolute",
              "top": "5px",
              "right": "5px",
              "color": "white",
              "z-index": "1",
              "font-size": "18px"
            },
            "attributes": {
              "iconName": "[$Icon]"
            }
          },
          {
            "elmType": "img",
            "attributes": {
              "src": "=getThumbnailImage([$Image], '160', '150')"
            },
            "style": {
              "width": "160px",
              "height": "150px",
              "object-fit": "cover",
              "border-radius": "8px"
            }
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitionimage-grid-horizontally.json

From the contributor

How to use this sample

Summary

Displays images in a grid layout with customisable height and width. The sample was inspired by the chevron-shape-format by André Lage. On click of each post, the link specified by the URL is opened. On hover on each image the description of the image is shown. Optionally an icon is displayed on the top right of the image.

This sample includes two formatting options:

  1. image-grid.json - Original row formatter for displaying images in a grid layout

screenshot of the sample

Animated GIF of the Styled SharePoint List View In Action

[!CAUTION] This sample (image-grid.json) uses the float style, which is now deprecated. As a result, it may not work as expected.

  1. Image-grid-horizontally.json - Tile formatter designed for Gallery view type to display images horizontally

screenshot of the sample

View requirements

This sample provides two different formatting approaches:

Option 1: Row Formatter (image-grid.json)

Use this format with standard list views. Note: Due to recent changes in Microsoft Lists, this format may not display images horizontally as expected in some scenarios.

  • Apply the formatting using Format current view option
  • The format expect the following fields:
Type Internal Name Required Notes
Multiple line of text Description Yes
Single line of text Icon No Set the icon name for Fluent UI Icons.
Hyperlink URL Yes
Yes/No NewTab No This field is used to open the link the same tab or new tab.
Number Width No If not set, the default width is set to 100px.
Number Height No If not set, the default height is set to 100px.
Image Image Yes

Option 2: Tile Formatter (Image-grid-horizontally.json) - Recommended

Use this format with Gallery view type for optimal horizontal image display.

  • Change the view type to Gallery
  • Apply the tile formatting using Format this gallery option
  • Uses fixed dimensions (160px width, 150px height) for consistent display
  • The format expect the following fields:
Type Internal Name Required Notes
Multiple line of text Description Yes Displayed in hover card
Single line of text Icon No Set the icon name for Fluent UI Icons.
Hyperlink URL Yes
Yes/No NewTab No This field is used to open the link the same tab or new tab.
Image Image Yes

Technologies Used

  • SharePoint
  • List (used to store the image data)
  • View Formatting (JSON used to style the list into the familiar Instagram output)

Prerequisites

  • You must have a valid SharePoint Online license and permission to create lists.

  • You must have a modern SharePoint site where you can store the data for the app.

  • Format the view and copy and paste the JSON provided.

Sample

Solution Author(s)
image-grid.json Reshmee Auckloo
Image-grid-horizontally.json Valeras Narbutas

Version history

Version Date Comments
1.0 May 20, 2023 Initial release
2.0 July 30, 2025 Updated to include tile formatter for Gallery view type

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Additional notes

The following issues and pull request are related to the deprecation of the float style:

Keep exploring

More formats like this

Key Dates Timeline Checklist

A modern horizontal timeline view that displays key dates or milestones as monthly columns.

Explore format

Sports Card

This SharePoint JSON view formatting sample transforms list items into vertical sports trading cards with header bar, country badge, player silhouette, name band, star rating and three stat bars.

Explore format

Credit / Loyalty Card

Transforms list items into realistic credit / loyalty cards with a brand name, tier pill, EMV chip, contactless symbol, embossed card number, cardholder, expiry, and network logo. The card colour is driven by the Tier value.

Explore format