Components that show several items in a grid let you choose how many items sit side by side (Columns) and how much space separates them (Column Gap).

Left: six items arranged in three columns with a small 8 pixel gap highlighted between them. Right: the same items in two columns with a larger 32 pixel gap. A legend explains that items wrap to the next row and that item width is calculated automatically.
Items fill a row from left to right and wrap to the next row. The gap applies between columns and between rows.

Which components have these settings

Carousel, Feature Box, Image Gallery, Links, Profiles, Simple Content, Special List, Video and Views. Components that stack their items vertically by nature (Accordion, Tabs, Read More, Slideshow, Infinite Logos, Overlay Content) do not have them.

A few components interpret the settings in their own way — for a Carousel, Columns is the number of cards visible at once; for Views it applies only in the Boxed Card display. The component pages give the details.

Where to find them

Both drop-downs are in the light-blue Config row of the card, next to Target Placement and Component Width.

The Config row of a Feature Box card: Target Placement, Display Type, Columns set to 3 columns, Column Gap set to 30px, Height, Orientation, Color Style, Component Width and Custom Class.
Config row of a Feature Box. Columns and Column Gap are in the first line; the other fields are specific to the Feature Box.

Columns

The Columns drop-down expanded, listing 1 column to 10 columns.
Columns options: 1 to 10.
  • Choose from 1 column to 10 columns. The field is required; each component has its own sensible default (Feature Box and Profiles: 3 columns; Links: 2 columns).
  • Items are placed left to right; when a row is full the next item starts a new row. Six items in three columns make two rows; seven items make three rows with a single item on the last one.
  • All columns have the same width. The item width is worked out automatically: (component width − gaps) ÷ number of columns. A narrower Component Width therefore makes every column narrower.
  • Pick the number of columns from the content, not the other way round: three or four cards with images, six to eight small logos or icons, one or two for text-heavy items.

Column Gap

The Column Gap drop-down expanded, listing 0px, 4px, 5px, 8px, 10px, 15px, 16px, 20px, 24px, 25px, 30px, 32px, 40px, 48px, 56px and 64px.
Column Gap options, in pixels.
  • The space between neighbouring items, both horizontally (between columns) and vertically (between rows). Values run from 0px (items touch) to 64px.
  • Defaults vary per component (Feature Box: 30px; Profiles: 32px; Links: 16px). Values around 16–32px suit most designs.
  • The gap is not added on the outside of the grid; the first and last columns stay flush with the component edges. Use Padding if you want space around the whole grid.
  • With 1 column there is nothing to separate horizontally; some components (Views) ignore the gap entirely in that case.

What happens on tablets and phones

The number of columns you choose is the number used on desktop screens. On smaller screens APB reduces it automatically so that items stay readable:

Screen widthColumns actually shown
Wider than 980 px (desktop)As configured (1 to 10).
681 to 980 px (tablet)3 or 4 columns become 2; 5 to 10 columns become 3; 1 and 2 stay as they are.
Up to 680 px (phone)Always 1 column, items stacked.

The gap value stays the same on every screen size. The Carousel is the exception to the table above: it keeps sliding and uses its own steps (at most 3 cards up to 900 px, 2 up to 680 px, 1 up to 480 px).

Tips

  • Try to give the grid a number of items that fills the last row (6 or 9 items for 3 columns, 8 for 4 columns). A lone item on the last row looks unfinished.
  • Images inside items are cropped or scaled per component; a large number of columns means small images. Check the result on the page after saving.