Let’s consider a 3-column grid that should become a 2-column grid at 768px breakpoint (Mobile Landscape) and collapse to a single column at 480px breakpoint (Mobile Portrait).

The breakpoints can be read as that width and below.

Ex.:

768 breakpoint = 768px and below

480 breakpoint = 480px and below

Select the parent container of your cards and set its display to Grid.

Manual Grid

Also, covered in the live build here.

Click + next to Grid columns to add a layer. Repeat this two more times to have 3 columns each taking up 1 fraction of the available horizontal space.

Click on the breakpoint 768px breakpoint.

We have only switched to viewing our page at this breakpoint. To enter into editing mode (for any CSS changes you want to make), click on the States icon.

Hover on any one of the Grid columns and hit delete to make it grid-template-columns: 1fr 1fr (behind the scenes) for the grid parent.

Repeat the process for the smallest 480px breakpoint. Remember that state should be on before you remove a grid column.

Note: If you do not see the changes in the builder or the live-updating browser tab, do a hard refresh (⌃F5/⌘⇧R).

Automatic Grid

If you want the grid to automatically be responsive by going from 3 columns to 2 columns to 1 column, set AUTO-FILL like this (as an example):

Minmax of 285px up to 1fr

(we are setting the minimum horizontal space to 285px and the maximum to 1 fraction for each grid child)

or for example,

Minmax of clamp(215px, 30vw, 300px) up to 1fr

to have a larger min value on desktops (300px) and smaller min value on mobiles (215px) with 30vw being the preferred track sizing value.