ionic-team · brandyscarney · Apr 30, 2026 · Apr 30, 2026 · Apr 30, 2026 · Apr 30, 2026
@@ -0,0 +1,72 @@
+---
+title: "ion-gallery"
+---
+
+import Props from '@ionic-internal/component-api/v9/gallery/props.md';
+import Events from '@ionic-internal/component-api/v9/gallery/events.md';
+import Methods from '@ionic-internal/component-api/v9/gallery/methods.md';
+import Parts from '@ionic-internal/component-api/v9/gallery/parts.md';
+import CustomProps from '@ionic-internal/component-api/v9/gallery/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v9/gallery/slots.md';
+
+<head>
+  <title>ion-gallery: Responsive Uniform and Masonry Gallery Layouts</title>
+  <meta
+    name="description"
+    content="A gallery displays slotted content in responsive uniform or masonry layouts with configurable column counts and item ordering."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+The gallery is a container for displaying images, cards, and other content in a responsive CSS grid. It supports `uniform` and `masonry` layouts, configurable column counts (fixed or breakpoint-based), and masonry ordering with `sequential` or `best-fit`.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v9/gallery/basic/index.md';
+
+<Basic />
+
+## Interfaces
+
+### GalleryBreakpointColumns
+
+```typescript
+interface GalleryBreakpointColumns {
+  xs?: string | number;
+  sm?: string | number;
+  md?: string | number;
+  lg?: string | number;
+  xl?: string | number;
+  xxl?: string | number;
+}
+```
+
+## Types
+
+### GalleryColumns
+
+```typescript
+type GalleryColumns = GalleryBreakpointColumns | string | number;
+```
+
+
+## Properties
+<Props />
+
+## Events
+<Events />
+
+## Methods
+<Methods />
+
+## CSS Shadow Parts
+<Parts />
+
+## CSS Custom Properties
+<CustomProps />
+
+## Slots
+<Slots />
@@ -74,8 +74,8 @@ Ionic apps are made of high-level building blocks called Components, which allow
   <p>Floating action buttons are circular buttons that perform a primary action on a screen.</p>
 </DocsCard>
 
-<DocsCard header="Grid" href="api/grid" icon="/icons/component-grid-icon.png">
-  <p>The grid is a powerful mobile-first system for building custom layouts.</p>
+<DocsCard header="Grids" href="api/grid" icon="/icons/component-grid-icon.png">
+  <p>A collection of layout components for building responsive grids and image layouts.</p>
 </DocsCard>
 
 <DocsCard header="Icons" href="api/icon" icon="/icons/component-icons-icon.png">
@@ -87,7 +87,7 @@ Ionic apps are made of high-level building blocks called Components, which allow
 </DocsCard>
 
 <DocsCard header="Inputs" href="api/input" icon="/icons/component-input-icon.png">
-  <p>Inputs provides a way for users to enter data in your app.</p>
+  <p>Inputs provide a way for users to enter data in your app.</p>
 </DocsCard>
 
 <DocsCard header="Item" href="api/item" img="/icons/feature-component-item-icon.png">

@@ -54,7 +54,7 @@ module.exports = function (context, options) {
         await generateMarkdownForVersion(version, npmTag, context.i18n.currentLocale, false);
       }
 
-      let npmTag = 'latest';
+      let npmTag = '8.8.6-dev.11777569278.1613db2e';
       if (currentVersion.banner === 'unreleased') {
         npmTag = 'next';
       } else if (currentVersion.path !== undefined) {

@@ -336,9 +336,9 @@ module.exports = {
     },
     {
       type: 'category',
-      label: 'Grid',
+      label: 'Grids',
       collapsed: false,
-      items: ['api/grid', 'api/col', 'api/row'],
+      items: ['api/grid', 'api/col', 'api/row', 'api/gallery'],
     },
     {
       type: 'category',

@@ -15,8 +15,8 @@
     "@angular/platform-browser": "^20.0.0",
     "@angular/platform-browser-dynamic": "^20.0.0",
     "@angular/router": "^20.0.0",
-    "@ionic/angular": "8.7.11",
-    "@ionic/core": "8.7.11",
+    "@ionic/angular": "8.8.6-dev.11777569278.1613db2e",
+    "@ionic/core": "8.8.6-dev.11777569278.1613db2e",
     "ionicons": "8.0.13",
     "rxjs": "^7.8.1",
     "tslib": "^2.5.0",

@@ -9,7 +9,7 @@
     "start": "vite preview"
   },
   "dependencies": {
-    "@ionic/core": "8.7.11",
+    "@ionic/core": "8.8.6-dev.11777569278.1613db2e",
     "ionicons": "8.0.13"
   },
   "devDependencies": {

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ionic/react": "8.7.11",
-    "@ionic/react-router": "8.7.11",
+    "@ionic/react": "8.8.6-dev.11777569278.1613db2e",
+    "@ionic/react-router": "8.8.6-dev.11777569278.1613db2e",
     "@types/node": "^24.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",

@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ionic/vue": "8.7.11",
-    "@ionic/vue-router": "8.7.11",
+    "@ionic/vue": "8.8.6-dev.11777569278.1613db2e",
+    "@ionic/vue-router": "8.8.6-dev.11777569278.1613db2e",
     "vue": "^3.2.25",
     "vue-router": "4.6.3"
   },

@@ -0,0 +1,23 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Gallery</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-gallery>
+    <img src="https://ionicframework.com/docs/img/demos/gallery/01.png" alt="Image 1" />
+    <img src="https://ionicframework.com/docs/img/demos/gallery/02.png" alt="Image 2" />
+    <img src="https://ionicframework.com/docs/img/demos/gallery/03.png" alt="Image 3" />
+    <img src="https://ionicframework.com/docs/img/demos/gallery/04.png" alt="Image 4" />
+    <img src="https://ionicframework.com/docs/img/demos/gallery/05.png" alt="Image 5" />
+    <img src="https://ionicframework.com/docs/img/demos/gallery/06.png" alt="Image 6" />
+    <img src="https://ionicframework.com/docs/img/demos/gallery/07.png" alt="Image 7" />
+    <img src="https://ionicframework.com/docs/img/demos/gallery/08.png" alt="Image 8" />
+    <img src="https://ionicframework.com/docs/img/demos/gallery/09.png" alt="Image 9" />
+    <img src="https://ionicframework.com/docs/img/demos/gallery/10.png" alt="Image 10" />
+    <img src="https://ionicframework.com/docs/img/demos/gallery/11.png" alt="Image 11" />
+    <img src="https://ionicframework.com/docs/img/demos/gallery/12.png" alt="Image 12" />
+  </ion-gallery>
+</ion-content>
+```
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonGallery, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonGallery, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```