Every child gets the same width, and rows share a height, so cards line up whatever their content. Long unbroken text does not stretch a column.

<.grid columns={2} space="base">
  <.box secondary padding="base">One</.box>
  <.box secondary padding="base">Two</.box>
  <.box secondary padding="base">Three</.box>
</.grid>

Set collapse to the breakpoint below which the grid becomes a single column: sm (below 560px), md (below 744px) or lg (below 1024px).

For a list of cards render it as a list, which also tells screen readers how many there are:

<.grid tag="ul" columns={2} space="base" collapse="md">
  <.box :for={contact <- @contacts} tag="li" secondary padding="base">
    {contact.name}
  </.box>
</.grid>