Composant · Structure

Row

Stable

Ligne d'une grille à 12 colonnes. La gouttière (gutter) est partagée avec les Col enfants pour un calcul de largeur cohérent.

Exemples

Deux colonnes 6/6, gutter=6

span=6

Voir le code (Svelte)

<Row gutter={6}>
  <Col span={6}>
    <Card>
      <p class="fp-card-text">span=6</p>
    </Card>
  </Col>
  <Col span={6}>
    <Card>
      <p class="fp-card-text">span=6</p>
    </Card>
  </Col>
</Row>

Quatre colonnes 3/3/3/3

Voir le code (Svelte)

<Row gutter={4}>
  <Col span={3}>
    <Card>
      <p class="fp-card-text">3</p>
    </Card>
  </Col>
  <Col span={3}>
    <Card>
      <p class="fp-card-text">3</p>
    </Card>
  </Col>
  <Col span={3}>
    <Card>
      <p class="fp-card-text">3</p>
    </Card>
  </Col>
  <Col span={3}>
    <Card>
      <p class="fp-card-text">3</p>
    </Card>
  </Col>
</Row>

API

Prop	Type	Default
`gutter`	`number` (pas 0–12)	`4`
`align`	`"start" \| "center" \| "end" \| "stretch" \| "baseline"`	–
`justify`	`"start" \| "center" \| "end" \| "between" \| "around" \| "evenly"`	–
`wrap`	`boolean`	`true`
`as`	`string`	`"div"`

Row expose --st-row-gutter, lu par chaque Col pour soustraire sa part de gouttière.

Tokens utilisés

--st-spacing-1 … --st-spacing-12
--st-row-gutter (calculé)