GroupCollect 1.3.142

Row

A row renders its children in a non-wrapping row.

'justify' attribute options: Open in playground
one
two
three
four
five
one
two
three
four
five
one
two
three
four
five
one
two
three
four
five
one
two
three
four
five
one
two
three
four
five 
<.row class="gc-border-width-sm gc-padding-base" space="base" justify="start">
  <.chip id="chip-1">one</.chip>
  <.chip id="chip-2">two</.chip>
  <.chip id="chip-3">three</.chip>
  <.chip id="chip-4">four</.chip>
  <.chip id="chip-5">five</.chip>
</.row>
<.row class="gc-border-width-sm gc-padding-base" space="base" justify="end">
  <.chip id="chip-1">one</.chip>
  <.chip id="chip-2">two</.chip>
  <.chip id="chip-3">three</.chip>
  <.chip id="chip-4">four</.chip>
  <.chip id="chip-5">five</.chip>
</.row>
<.row class="gc-border-width-sm gc-padding-base" space="base" justify="center">
  <.chip id="chip-1">one</.chip>
  <.chip id="chip-2">two</.chip>
  <.chip id="chip-3">three</.chip>
  <.chip id="chip-4">four</.chip>
  <.chip id="chip-5">five</.chip>
</.row>
<.row class="gc-border-width-sm gc-padding-base" space="base" justify="between">
  <.chip id="chip-1">one</.chip>
  <.chip id="chip-2">two</.chip>
  <.chip id="chip-3">three</.chip>
  <.chip id="chip-4">four</.chip>
  <.chip id="chip-5">five</.chip>
</.row>
<.row class="gc-border-width-sm gc-padding-base" space="base" justify="around">
  <.chip id="chip-1">one</.chip>
  <.chip id="chip-2">two</.chip>
  <.chip id="chip-3">three</.chip>
  <.chip id="chip-4">four</.chip>
  <.chip id="chip-5">five</.chip>
</.row>
<.row class="gc-border-width-sm gc-padding-base" space="base" justify="evenly">
  <.chip id="chip-1">one</.chip>
  <.chip id="chip-2">two</.chip>
  <.chip id="chip-3">three</.chip>
  <.chip id="chip-4">four</.chip>
  <.chip id="chip-5">five</.chip>
</.row>
'align' attribute options: Open in playground
a taller element
one
two
three
four
five
a taller element
one
two
three
four
five
a taller element
one
two
three
four
five 
<.row class="gc-border-width-sm gc-padding-base" space="base" align="start">
  <.box border="sm" padding="sm">a taller element</.box>
  <.chip id="chip-1">one</.chip>
  <.chip id="chip-2">two</.chip>
  <.chip id="chip-3">three</.chip>
  <.chip id="chip-4">four</.chip>
  <.chip id="chip-5">five</.chip>
</.row>
<.row class="gc-border-width-sm gc-padding-base" space="base" align="end">
  <.box border="sm" padding="sm">a taller element</.box>
  <.chip id="chip-1">one</.chip>
  <.chip id="chip-2">two</.chip>
  <.chip id="chip-3">three</.chip>
  <.chip id="chip-4">four</.chip>
  <.chip id="chip-5">five</.chip>
</.row>
<.row class="gc-border-width-sm gc-padding-base" space="base" align="center">
  <.box border="sm" padding="sm">a taller element</.box>
  <.chip id="chip-1">one</.chip>
  <.chip id="chip-2">two</.chip>
  <.chip id="chip-3">three</.chip>
  <.chip id="chip-4">four</.chip>
  <.chip id="chip-5">five</.chip>
</.row>
'space' attribute options: Open in playground
one
two
three
four
five
one
two
three
four
five
one
two
three
four
five
one
two
three
four
five
one
two
three
four
five
one
two
three
four
five
one
two
three
four
five 
<.row space="2xs">
  <.chip id="chip-1">one</.chip>
  <.chip id="chip-2">two</.chip>
  <.chip id="chip-3">three</.chip>
  <.chip id="chip-4">four</.chip>
  <.chip id="chip-5">five</.chip>
</.row>
<.row space="xs">
  <.chip id="chip-1">one</.chip>
  <.chip id="chip-2">two</.chip>
  <.chip id="chip-3">three</.chip>
  <.chip id="chip-4">four</.chip>
  <.chip id="chip-5">five</.chip>
</.row>
<.row space="sm">
  <.chip id="chip-1">one</.chip>
  <.chip id="chip-2">two</.chip>
  <.chip id="chip-3">three</.chip>
  <.chip id="chip-4">four</.chip>
  <.chip id="chip-5">five</.chip>
</.row>
<.row space="base">
  <.chip id="chip-1">one</.chip>
  <.chip id="chip-2">two</.chip>
  <.chip id="chip-3">three</.chip>
  <.chip id="chip-4">four</.chip>
  <.chip id="chip-5">five</.chip>
</.row>
<.row space="lg">
  <.chip id="chip-1">one</.chip>
  <.chip id="chip-2">two</.chip>
  <.chip id="chip-3">three</.chip>
  <.chip id="chip-4">four</.chip>
  <.chip id="chip-5">five</.chip>
</.row>
<.row space="xl">
  <.chip id="chip-1">one</.chip>
  <.chip id="chip-2">two</.chip>
  <.chip id="chip-3">three</.chip>
  <.chip id="chip-4">four</.chip>
  <.chip id="chip-5">five</.chip>
</.row>
<.row space="2xl">
  <.chip id="chip-1">one</.chip>
  <.chip id="chip-2">two</.chip>
  <.chip id="chip-3">three</.chip>
  <.chip id="chip-4">four</.chip>
  <.chip id="chip-5">five</.chip>
</.row>