Gallery

Responsive grid layout for images and figures.

Examples

Standard Grid (3 Columns)

blade

<x-plume::gallery>
    <x-plume::figure
        src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80"
        aspect="square" />
    ...
</x-plume::gallery>

4 Columns, Small Gap

blade

<x-plume::gallery cols="4" gap="2">
    <x-plume::figure
        src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80"
        aspect="square" />
    ...
</x-plume::gallery>

Prop	Type	Default	Description
cols	int	3	Shortcut to set responsive column distribution.
gap	int	4	Gap between grid items.
minCols	int	null	Minimum number of grid columns on mobile.
maxCols	int	null	Maximum number of grid columns on large screens.

Usage

blade

<x-plume::gallery cols="3" gap="6">
    <x-plume::figure src="..." />
    <x-plume::figure src="..." />
    <x-plume::figure src="..." />
</x-plume::gallery>