ionic-team · brandyscarney · Apr 30, 2026 · Apr 30, 2026 · Apr 30, 2026 · Apr 30, 2026
@@ -0,0 +1,134 @@
+---
+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="The gallery arranges images, cards, and other content in responsive uniform or masonry layouts with configurable column counts and masonry ordering modes."
+  />
+</head>
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+<EncapsulationPill type="shadow" />
+
+The gallery arranges images, cards, and other content in a responsive grid. It supports uniform and masonry layouts, configurable column counts (fixed or breakpoint-based), and multiple masonry ordering modes.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v9/gallery/basic/index.md';
+
+<Basic />
+
+## Uniform
+
+Uniform is the default layout. It creates a consistent grid where items appear at the same visual size with a `1 / 1` aspect ratio. This layout is ideal when visual alignment is more important than preserving each item's natural height.
+
+import Uniform from '@site/static/usage/v9/gallery/uniform/index.md';
+
+<Uniform />
+
+## Masonry
+
+Masonry preserves each item's natural height and stacks items vertically within each column, creating a staggered layout with minimal gaps. Masonry supports two ordering modes: sequential and best fit.
+
+:::important
+Avoid adding margin to top-level items in a masonry layout, as it can cause incorrect item placement. To add spacing, wrap the content in a child element and apply margin to that wrapper instead.
+:::
+
+### Sequential
+
+Sequential is the default masonry ordering mode. Items are placed in DOM order, filling columns from left to right.
+
+import MasonrySequential from '@site/static/usage/v9/gallery/masonry-sequential/index.md';
+
+<MasonrySequential />
+
+### Best Fit
+
+Best fit places each item in the column with the most available space, helping balance column heights.
+
+import MasonryBestFit from '@site/static/usage/v9/gallery/masonry-best-fit/index.md';
+
+<MasonryBestFit />
+
+### Images
+
+In masonry layouts, top-level `img` elements are given default styles to ensure consistent rendering. These styles make images fill their container while preserving their aspect ratio and keeping them centered.
+
+:::note
+Images wrapped in other elements (for example, inside a `figure`) do not inherit these defaults. Apply the same styles to the nested `img` if you want matching behavior.
+:::
+
+import Images from '@site/static/usage/v9/gallery/images/index.md';
+
+<Images />
+
+## Columns
+
+Columns can be configured with the `columns` property using either a single number for a fixed column count, or a breakpoint map to change columns across screen sizes.
+
+If no value is provided, or if an invalid value is used, the gallery falls back to its default responsive column behavior. The default column counts by breakpoint are:
+
+| Breakpoint | Min Width | Default Columns |
+| --- | --- | ---|
+| `xs` | `0` | `2` |
+| `sm` | `576px` | `3` |
+| `md` | `768px` | `4` |
+| `lg` | `992px` | `6` |
+| `xl` | `1200px` | `8` |
+| `xxl` | `1400px` | `10` |
+
+import Columns from '@site/static/usage/v9/gallery/columns/index.md';
+
+<Columns />
+
+## 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.11777668103.132817bd';
       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.11777668103.132817bd",
+    "@ionic/core": "8.8.6-dev.11777668103.132817bd",
     "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.11777668103.132817bd",
     "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.11777668103.132817bd",
+    "@ionic/react-router": "8.8.6-dev.11777668103.132817bd",
     "@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.11777668103.132817bd",
+    "@ionic/vue-router": "8.8.6-dev.11777668103.132817bd",
     "vue": "^3.2.25",
     "vue-router": "4.6.3"
   },