Results Grid and Layout Customization

This page covers spacing, column behavior, and card-density tuning on results views.

What you can change

• gaps between facets and product area,
• product grid spacing,
• per-column and per-card-type behavior,
• breakpoint-specific density.

Example

/* Results page root scope */
.kea-search.kea-search--classic,
.kea-search.kea-search--combined {
  --kea-layout-gap: 20px;
  --kea-layout-facets-width: 300px;
  --kea-products-gap: 18px;
}

.kea-products[data-kea-component="products"] .kea-products__grid {
  gap: var(--kea-products-gap, 16px);
}

.kea-products[data-kea-columns="2"] .kea-products__grid {
  gap: 12px;
}

@media (max-width: 640px) {
  .kea-products[data-kea-component="products"] .kea-products__grid {
    gap: 10px;
  }
}

Documented selectors and markers for this block

• Classes: .kea-products, .kea-products__grid, .kea-grid-container.
• Markers: data-kea-component="products", data-kea-card-type, data-kea-columns, data-kea-column.
• Root markers: data-kea-view, data-kea-layout, data-kea-breakpoint. For root-level scoping, prefer the .kea-search.kea-search--{mode} class composition over the data-attribute form.
• Tokens: --kea-products-gap, --kea-layout-gap, --kea-layout-facets-width, --kea-layout-main-width.

If styles do not apply

• Inspect rendered data-kea-columns and data-kea-card-type.
• Check for hardcoded gap declarations later in CSS.
• On mobile, tune the small-viewport scope (for example @media (max-width: 640px)) separately from global grid rules.