Configure the grid layout

Baseline uses a grid layout to arrange your store's products and collections, making them easier for visitors to browse. Use Shopify's Theme editor to customize the grid's appearance.

The previous image shows a Featured collection table section on a store's home page. The grid theme settings control the grid borders displayed between the table's rows and columns.

Access the grid theme settings

To access the grid theme settings:

1. In your store's Shopify admin, select Sales channels > Online store > Themes.

2. In the Themes pane, locate the version of Baseline you want to modify.

3. Next to the theme's name, select Edit theme to open the Theme editor.

4. In the Theme editor, select Theme settings (the gears icon) > Grid.

5. After adjusting the settings, select Save to avoid losing unsaved changes.

Choose a border color for the grid

To choose a border color for the grid:

1. In the Theme editor, select Theme settings > Colors.

2. Locate the Grid > Border color menu area.

3. Use one of the following methods to specify a border color for the grid.

   • Choose a color with the Color picker.
   • Enter a hexadecimal (hex) color value. Refer to W3 Schools: Colors HEX.
   • Select a Currently used color.
   • Choose the Connect dynamic source icon.

   

   Note

   To colorize an element by using a color from a dynamic source, select the Connect dynamic source icon beside the element selector, and then choose a dynamic source to add. To use this feature, you must define sources of dynamic content for colors. Refer to Shopify help: Metafields.

4. Select Save.

Adjust the spacing around content inside the grid

To adjust the spacing around content inside the grid:

1. In the Theme editor, select Theme settings > Grid.

2. Use the Content spacing options to specify the amount of spacing inside the grid.

   The available content spacing options are:

   • None. With this option, no spacing is applied.
   • Small. Applies a small amount of spacing.
   • Medium. Applies medium spacing.
   • Large. Sets spacing to the maximum amount.

   

Note

By default, the Baseline, Brutalist, and Press Theme style presets are set to Small spacing. The Austere and Courier presets have Medium spacing applied.

Customize the spacing between media items and grid borders

Complete the following steps to customize spacing between media items and grid borders:

1. In the Theme editor, select Theme settings > Media.

2. Adjust a setting described in the following table.

Setting name	Description
Grid media style	Use the Grid media style setting to specify how media items are displayed inside the grid. The options are Fill and Inset. With the Fill option, media items fill the grid to the edge of the border. With the Inset option, empty space is applied between the media item edges and the grid borders.
Show border on inset media	Use the Show border on inset media setting to show or hide a border around inset media items. This option applies only when Grid media style is set to Inset.

Set the width of the grid's borders

To set the width of the grid's borders:

1. In the Theme editor, select Theme settings > Grid.

2. Use the Border width slider to set the width of the grid border in pixels. The slider ranges from 0 px to 5 px.

   

Example: Hide the grid border

The grid cannot be removed, but the following settings make it less visible.

• Set the grid Border width to 0 px.
• Set the grid Border color to the same color as the page's or section's background color (transparent).

Example: Grid border width examples

The following grid border width and color settings provide interesting layouts. As an example, the settings are applied to a store's Featured collection table section. The section's table typically displays grid border lines between the table's rows and columns.

Setting	Value
Grid border width	5 px
Grid border color	Same color as the section's background color (transparent).

Setting	Value
Grid border width	0 px