> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://rubik-combined-listings.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Layout Options

Rubik Combined Listings supports two layout types for image and button swatches: **Grid** and **Carousel**.

**Grid layout**

* Built with CSS Grid and auto-fill columns
* Adjustable gap, alignment, and inner padding
* Supports “Limit to one row” and “Max visible” controls
* Displays a “+N more” overflow indicator when swatches are hidden

Grid layout is ideal for structured, multi-row swatch displays on product pages.

**Carousel layout**

* Powered by a namespaced Swiper instance (RubikSwiper)
* Auto slide width based on swatch size
* Optional navigation arrows
* Adjustable arrow size, roundness, blur, and color
* Each category renders as a separate carousel
* Navigation is hidden automatically when all items fit

Carousel layout works well for horizontal scrolling swatches on product pages and product cards, especially when there are many options.

![](https://storage.crisp.chat/users/helpdesk/website/-/3/a/d/7/3ad7eddcf19c2c00/image_bz6v4t.png)