GroupCollect 1.3.252
- 1.1.0

Grid

Renders its children in equal-width columns.

Read more Read less

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>
Two equal columns; rows share a height Open in playground

Card 1

Card 2

Card 3 

<.grid columns={2} space="base">
  <.box secondary padding="base"><.p>Card 1</.p></.box>
  <.box secondary padding="base"><.p>Card 2</.p></.box>
  <.box secondary padding="base"><.p>Card 3</.p></.box>
</.grid>
Three columns Open in playground

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6 

<.grid columns={3} space="sm">
  <.box secondary padding="base"><.p>Card 1</.p></.box>
  <.box secondary padding="base"><.p>Card 2</.p></.box>
  <.box secondary padding="base"><.p>Card 3</.p></.box>
  <.box secondary padding="base"><.p>Card 4</.p></.box>
  <.box secondary padding="base"><.p>Card 5</.p></.box>
  <.box secondary padding="base"><.p>Card 6</.p></.box>
</.grid>
Two columns that become one below 744px Open in playground

Card 1

Card 2

Card 3

Card 4 

<.grid columns={2} space="base" collapse="md">
  <.box secondary padding="base"><.p>Card 1</.p></.box>
  <.box secondary padding="base"><.p>Card 2</.p></.box>
  <.box secondary padding="base"><.p>Card 3</.p></.box>
  <.box secondary padding="base"><.p>Card 4</.p></.box>
</.grid>
Rendered as a list so screen readers announce the count Open in playground

  • Jamie Chen

  • Philip Fry

  • Turanga Leela with a very long name that wraps onto a second line 

<.grid tag="ul" columns={2} space="base" collapse="md">
  <.box tag="li" secondary padding="base"><.p>Jamie Chen</.p></.box>
  <.box tag="li" secondary padding="base"><.p>Philip Fry</.p></.box>
  <.box tag="li" secondary padding="base"><.p>Turanga Leela with a very long name that wraps onto a second line</.p></.box>
</.grid>