> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shopify.lightsout.agency/llms.txt
> Use this file to discover all available pages before exploring further.

# Adjust grid spacing between cards in Facet

> Set the column and row gaps between product cards, collection cards and other grid items in Facet, with separate values for desktop and phones.

The **Grid** settings set the space between items laid out in a grid, such as product cards on a collection page. You set one pair of gaps for desktop and another for phones. This page explains each gap and where it applies.

## What these settings control

* The space between cards side by side (column gap).
* The space between rows of cards (row gap).
* Grids on collection, search and blog pages, and in sections such as **Featured collection**, **Features**, **Mosaic**, **Bundle** and related products.

## How to access

**1. Open the Theme Customizer**

In your Shopify admin, open **Online Store**, then **Themes**, and click **Customize** next to Facet.

**2. Open Theme settings**

Click the **Theme settings** icon in the left sidebar.

**3. Open Grid**

Expand **Grid**. Open a collection page in the preview to see the gaps change as you drag.

![The theme editor with Theme settings open and the Grid group expanded in the sidebar.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/theme-settings/grid/grid-location.jpg?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=e4c9d088a21ce1819fb3757dcae76980)

## Grid settings

![Theme editor sidebar showing the Grid theme settings: Grid, Desktop, Column gap, Row gap, Mobile.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/theme-settings/grid/grid-settings-1.png?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=69a1ad0c00bfb7ed0b3f503adc5429b4)

### Desktop

Used on screens 750 pixels wide and wider.

* **Column gap**: from 0 to 60 pixels. Default: 24.
* **Row gap**: from 0 to 60 pixels. Default: 24.

### Mobile

Used on screens narrower than 750 pixels.

* **Column gap**: from 0 to 40 pixels. Default: 20.
* **Row gap**: from 0 to 40 pixels. Default: 16.

> [!NOTE]
>
> A row gap of 0 makes rows of cards touch. With **Show card borders** on in [Product cards](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/product-cards.md), the borders of neighboring cards then meet.

## Best practices

* **Keep the row gap close to the column gap.** Even spacing makes a grid read as one block. Product cards already leave space under their text, so a slightly smaller row gap often looks even.
* **Use small gaps on phones.** Phones show two cards side by side, and a large gap makes the pictures noticeably smaller.
* **Try 0 for an editorial look.** A zero column gap with borderless cards makes pictures run together like a contact sheet.

## Related guides

> [card] [Product cards](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/product-cards.md)
>
> Set the picture shape and borders of the cards in the grid.

> [card] [Layout](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/layout.md)
>
> Set the page width the grid fills.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.