ion-gallery
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
Interfaces
GalleryBreakpointColumns
interface GalleryBreakpointColumns {
xs?: string | number;
sm?: string | number;
md?: string | number;
lg?: string | number;
xl?: string | number;
xxl?: string | number;
}
Types
GalleryColumns
type GalleryColumns = GalleryBreakpointColumns | string | number;
Properties
columns
| Description | The number of columns to display. Can be set as a number or an object of breakpoint values (e.g. { xs: 2, sm: 3, md: 4 }). |
| Attribute | columns |
| Type | GalleryBreakpointColumns ｜ number ｜ string |
| Default | DEFAULT_COLUMNS |
layout
| Description | The visual layout of the gallery. When uniform, rows take up the height of the tallest item and are spaced evenly across the gallery. Additionally, items will have an aspect ratio of 1/1, forcing them to be square unless a height is explicitly set. When masonry, items will be positioned under each other with only the specified gap between them. |
| Attribute | layout |
| Type | "masonry" ｜ "uniform" |
| Default | 'uniform' |
mode
| Description | The mode determines the platform behaviors of the component. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
order
| Description | The order in which items are positioned. Only applies when layout is masonry. When sequential, items are positioned in the order they are placed in the DOM. When best-fit, items are positioned under the column with the most available space. |
| Attribute | order |
| Type | "best-fit" ｜ "sequential" |
| Default | 'sequential' |
theme
| Description | The theme determines the visual appearance of the component. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| Attribute | theme |
| Type | "ios" ｜ "md" ｜ "ionic" |
| Default | undefined |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
| Name | Description |
|---|---|
--ion-gallery-gap | Space between gallery items |
Slots
| Name | Description |
|---|---|
| `` | Content is placed in a responsive gallery layout. |