Schema uses a grid-min variable system to control column layouts - the same concept as ACSS's variable grid, adapted for Figma.

https://www.figma.com/design/NJkfgz1fYHXZDdJt8OiqFw/Schema?node-id=8721-6465&t=5nkqA3gwdIcAWV1r-1

How it works in Figma

Grid layouts in Schema are built with auto layout frames set to wrap. The cards (or other items) inside have their width set to a grid-min variable. This minimum width, combined with the available space in the parent frame, determines how many columns fit on a row. When the frame gets narrower, items that no longer fit wrap to the next row automatically.

You don't set a column count directly - you set a minimum item width, and the number of visible columns is a result of the available space.

Grid-min variables

Schema provides three grid-min presets in the Layout collection:

• grid-min-l - produces 2 columns on desktop
• grid-min-m - produces 3 columns on desktop
• grid-min-s - produces 4 columns on desktop

These values work with the default content width. If you change your content width significantly, you may need to adjust the grid-min values slightly - but in most cases they'll work as-is.

Mobile behavior

On mobile, the grid-min values are set intentionally below the mobile viewport width. This gives you control over whether a grid stacks to a single column or stays as two columns on smaller screens.

Grid gap

The space between grid items is controlled by grid-gap. This value stays consistent across Desktop and Mobile modes - only the gutter and section padding scale down on smaller screens.

When to use which preset

• grid-min-l - two-column layouts like side-by-side content, image and text pairs
• grid-min-m - three-column layouts like card grids, feature lists, team members
• grid-min-s - four-column layouts like icon grids, logo rows, small card collections

You can also create custom min values for layouts that don't fit these presets. Define a new variable in the Layout collection and apply it to your items.