Grille

Utilisation

Le composant Grid est un composant technique qui facilite l'utilisation du style de grille CSS. Pour obtenir des recommandations d'utilisation, reportez-vous à la documentation officielle de la disposition de la grille CSS.

Code

import { Grid, GridItem } from '@jutro/layout';

<Grid>
  <GridItem>
    <span>First Item</span>
  </GridItem>
  <GridItem>
    <span>Second Item</span>
  </GridItem>
  <GridItem>
    <span>Third Item</span>
  </GridItem>
</Grid>;

Instruction d'importation

import { Grid, GridItem } from '@jutro/layout';

Cahier des charges du composant

Assurez-vous de comprendre la surface de l'API des composants du système de conception, ainsi que les implications et les compromis. Pour en savoir plus, reportez-vous à notre introduction à l'API des composants.

Propriétés

Grille

autoRows: Type
array
Description
Defines implicit rows.
blockPointerEvents: Type
boolean
Description
If set to true, pointer events will be blocked.
children: Type
node
Description
Children; preferably 'GridItem' but works with any child.
className: Type
string
Description
CSS class name for this component.
columns: Type
string | number[]
Description
Defines explicit column widths.
gap: Type
'none' | 'small' | 'medium' | 'large'
Description
Gap size between the rows and columns.

Valeur par défaut
'medium'
hgap: Type
'none' | 'small' | 'medium' | 'large'
Description
Horizontal gap size between the columns. If unspecified, falls back to the gap property.
justifyContent: Type
'left' | 'center' | 'right' | 'around' | 'between' | 'evenly' | 'stretch'
Description
Justify logic for the grid within its container.

Valeur par défaut
'stretch'
justifyItems: Type
'left' | 'center' | 'right' | 'around' | 'between' | 'evenly' | 'stretch'
Description
Justify logic for all items within the grid.

Valeur par défaut
'stretch'
rows: Type
string | number[]
Description
Defines explicit row heights.
style: Type
React.CSSProperties | undefined
Description
DOM element styles.
tag: Type
string
Description
Optional DOM tag to render.

Valeur par défaut
'div'
valignItems: Type
'top' | 'middle' | 'bottom' | 'baseline' | 'stretch'
Description
Vertical alignment for all items within the grid.

Valeur par défaut
'stretch'
vgap: Type
'none' | 'small' | 'medium' | 'large'
Description
Vertical gap between the rows. If unspecified, falls back to the gap property.
alignContentobsolète: Type
'start' | 'center' | 'end' | 'baseline' | 'stretch'
Description
Aligns rows vertically within the grid container.

Valeur par défaut
'stretch'
phoneobsolète: Type
Grid
Description
Any Grid properties that will be used instead for the 'phone' breakpoint. Deprecated since 10.9.0.
phoneWideobsolète: Type
Grid
Description
Any Grid properties that will be used instead for the 'phoneWide' breakpoint. Deprecated since 10.9.0.
repeatobsolète: Type
'auto-fit' | 'auto-fill' | number | string
Description
Logic for how columns will be repeated.
tabletobsolète: Type
Grid
Description
Any Grid properties that will be used instead for the 'tablet' breakpoint. Deprecated since 10.9.0.
valignContentobsolète: Type
'top' | 'middle' | 'bottom' | 'baseline' | 'stretch'
Description
Aligns rows vertically within the grid container.

Valeur par défaut
'stretch'

GridItem

alignSelf: Type
'top' | 'middle' | 'bottom' | 'baseline' | 'stretch'
Description
Aligns the item horizontally within its container.

Valeur par défaut
'stretch'
colSpan: Type
number | string
Description
Specifies how many columns the element will span.
colStart: Type
number | string
Description
Specifies a grid item's start column position within the grid.
justifySelf: Type
'start' | 'center' | 'end' | 'stretch'
Description
Aligns the items vertically within their containers.

Valeur par défaut
'stretch'
rowSpan: Type
number | string
Description
Specifies how many rows the element will span.
rowStart: Type
number | string
Description
Specifies a grid item's start column position within the grid.
alignobsolète: Type
'start' | 'center' | 'end' | 'stretch'
Description
Aligns the items vertically within their containers. Deprecated since 10.9.0, use justifySelf instead.
cloneobsolète: Type
boolean
Description
Renders the child without a tag wrapper. It passes classNames and styles directly to the child element if possible. If not possible, it falls back to wrapping with a tag (for React elements which are not valid). Deprecated since 10.9.0.
fullWidthobsolète: Type
boolean
Description
If set to true, item takes full width of the parent grid. Ignored if colStart or colSpan is specified. Deprecated since 10.9.0.
phoneobsolète: Type
Grid
Description
Any Grid properties that will be used instead for the 'phone' breakpoint. Deprecated since 10.9.0.
phoneWideobsolète: Type
Grid
Description
Any Grid properties that will be used instead for the 'phoneWide' breakpoint. Deprecated since 10.9.0.
tabletobsolète: Type
Grid
Description
Any Grid properties that will be used instead for the 'tablet' breakpoint. Deprecated since 10.9.0.
textAlignobsolète: Type
'top' | 'middle' | 'bottom' | 'baseline' | 'stretch'
Description
Aligns text inside item. Deprecated since 10.9.0.
valignobsolète: Type
'top' | 'middle' | 'bottom' | 'baseline' | 'stretch'
Description
Aligns the item horizontally within its container. Deprecated since 10.9.0, use alignSelf instead.
visibleobsolète: Type
boolean
Description
Specifies whether the GridItem is visible. Deprecated since 10.9.0.

Crochets

Aucun crochet n'est disponible pour Grid.

Clés de traduction

Il n'existe aucune traduction pour Grid.

Pour en savoir plus sur la gestion des traductions, reportez-vous à notre section sur l'internationalisation.

Portes de sortie

Pour en savoir plus, reportez-vous à notre documentation sur les portes de sortie.

Exemples

Exemple de conteneur de grille de base

Un conteneur de grille Jutro de base contient un composant Grid avec plusieurs composants enfants. Si ces enfants sont des composants GridItem, vous pouvez utiliser les propriétés GridItem supplémentaires pour avoir plus de contrôle sur l'élément au niveau de la mise en page.

Le comportement par défaut suppose une colonne et ajoute chaque nouvel élément à une nouvelle ligne.

import { Grid, GridItem } from '@jutro/layout';

<Grid>
  <GridItem>
    <strong>First Item</strong>
  </GridItem>
  <GridItem>
    <strong>Second Item</strong>
  </GridItem>
  <GridItem>
    <strong>Third Item</strong>
  </GridItem>
</Grid>;

Exemple de colonnes multiples

Vous pouvez ajouter des colonnes supplémentaires en définissant des largeurs de colonne. Par défaut, les éléments remplissent chaque colonne avant de passer à la ligne suivante. Dans cet exemple, trois éléments sont ajoutés à une grille de deux colonnes.

import { Grid, GridItem } from '@jutro/layout';

<Grid columns={['1fr', '1fr']}>
  <GridItem>
    <strong>First Item</strong>
  </GridItem>
  <GridItem>
    <strong>Second Item</strong>
  </GridItem>
  <GridItem>
    <strong>Third Item</strong>
  </GridItem>
</Grid>;

Exemple `autoRows`

Vous pouvez utiliser la propriété autoRows pour déterminer la hauteur de ligne pour les lignes non définies dans l'attribut rows. Cela vous permet de définir la hauteur lorsque la longueur de la grille peut être inconnue. Dans cet exemple, la première ligne a une hauteur de 50 pixels et les lignes suivantes auront une hauteur supérieure de 75 pixels.

import { Grid, GridItem } from '@jutro/layout';

<Grid
  rows={['50px']}
  autoRows={['75px']}>
  <GridItem>
    <strong>First Item</strong>
  </GridItem>
  <GridItem>
    <strong>Second Item</strong>
  </GridItem>
  <GridItem>
    <strong>Third Item</strong>
  </GridItem>
</Grid>;

Exemples de justification

Vous pouvez utiliser la propriété justifyContent pour définir la manière dont les colonnes sont alignées dans la grille.

import { Grid, GridItem } from '@jutro/layout';

<Grid justifyContent="center">
  <GridItem>
    <strong>First Item</strong>
  </GridItem>
  <GridItem>
    <strong>Second Item</strong>
  </GridItem>
  <GridItem>
    <strong>Third Item</strong>
  </GridItem>
</Grid>;

La propriété justifyItems est utilisée pour définir la façon dont les éléments sont alignés dans leur conteneur.

import { Grid, GridItem } from '@jutro/layout';

<Grid justifyItems="center">
  <GridItem>
    <strong>First Item</strong>
  </GridItem>
  <GridItem>
    <strong>Second Item</strong>
  </GridItem>
  <GridItem>
    <strong>Third Item</strong>
  </GridItem>
</Grid>;

Pour définir la manière dont des éléments spécifiques sont alignés dans leur conteneur, vous utilisez la propriété justifySelf sur l'élément GridItem approprié.

import { Grid, GridItem } from '@jutro/layout';

<Grid>
  <GridItem justifySelf="stretch">
    <strong>justifySelf='stretch'</strong>
  </GridItem>
  <GridItem justifySelf="start">
    <strong>justifySelf='start'</strong>
  </GridItem>
  <GridItem justifySelf="center">
    <strong>justifySelf='center'</strong>
  </GridItem>
  <GridItem justifySelf="end">
    <strong>justifySelf='end'</strong>
  </GridItem>
</Grid>;

Exemples d'alignement

Vous utilisez la propriété alignItems pour définir la façon dont les éléments sont alignés verticalement dans leur conteneur.

import { Grid, GridItem } from '@jutro/layout';

<Grid
  columns={['1fr', '1fr']}
  alignItems="center">
  <GridItem>
    <p>
      <strong>First Item</strong>
    </p>
    <p>&nbsp;</p>
  </GridItem>
  <GridItem>
    <strong>Second Item</strong>
  </GridItem>
</Grid>;

Pour définir la manière dont des éléments spécifiques sont alignés verticalement dans leur conteneur, vous utilisez la propriété alignSelf sur l'élément GridItem approprié.

import { Grid, GridItem } from '@jutro/layout';

<Grid columns={['1fr', '1fr', '1fr', '1fr', '1fr']}>
  <GridItem>
    <p>
      <strong>alignSelf='stretch'</strong>
    </p>
    <p>&nbsp;</p>
  </GridItem>
  <GridItem alignSelf="center">
    <strong>alignSelf='center'</strong>
  </GridItem>
  <GridItem alignSelf="start">
    <strong>alignSelf='start'</strong>
  </GridItem>
  <GridItem alignSelf="end">
    <strong>alignSelf='end'</strong>
  </GridItem>
  <GridItem alignSelf="baseline">
    <strong>alignSelf='baseline'</strong>
  </GridItem>
</Grid>;

Exemple `colSpan`

La propriété colSpan figurant sur un élément GridItem définit le nombre de colonnes sur lequel l'élément va s'étendre.

import { Grid, GridItem } from '@jutro/layout';

<Grid
  columns={['1fr', '1fr', '1fr']}
  rows={['1fr', '1fr']}
  gap="large">
  <GridItem colSpan="3">
    <strong>First Item</strong>
  </GridItem>
  <GridItem>
    <strong>Second Item</strong>
  </GridItem>
  <GridItem colSpan="2">
    <strong>Third Item</strong>
  </GridItem>
</Grid>;

Exemple `rowSpan`

La propriété rowSpan figurant sur un élément GridItem définit le nombre de lignes sur lequel l'élément va s'étendre.

import { Grid, GridItem } from `@jutro/layout`;

<Grid columns={['1fr', '1fr']} rows={['1fr', '1fr']} gap="large">
  <GridItem rowSpan="2" >
    <strong>First Item</strong>
  </GridItem>
  <GridItem >
    <strong>Second Item</strong>
  </GridItem>
  <GridItem >
    <strong>Third Item</strong>
  </GridItem>
</Grid>

Exemples `colStart` et `rowStart`

Les propriétés colStart et rowStart figurant sur un élément GridItem définissent la colonne et la ligne dans lesquelles l'élément commence, respectivement. En combinaison avec colSpan et rowSpan, ces propriétés peuvent être utilisées pour garantir un niveau de granularité élevé en termes de personnalisation de la disposition de la grille.

import { Grid, GridItem } from `@jutro/layout`;

<Grid
  columns={['1fr', '1fr', '1fr']}
  rows={['1fr', '1fr', '1fr']}
  gap="large"
>
  <GridItem colSpan={2}>
    <strong>First Item</strong>
  </GridItem>
  <GridItem rowSpan={2} colStart={1}>
    <strong>Second Item</strong>
  </GridItem>
  <GridItem>
    <strong>Third Item</strong>
  </GridItem>
  <GridItem rowSpan={2} rowStart={1} colStart={3}>
    <strong>Fourth Item</strong>
  </GridItem>
  <GridItem colSpan={2}>
    <strong>Fifth Item</strong>
  </GridItem>
</Grid>

Composant	Propriété	Alternative
Grille	phone	Aucun
Grille	phoneWide	Aucun
Grille	tablet	Aucun
Grille	repeat	Aucun
GridItem	phone	Aucun
GridItem	phoneWide	Aucun
GridItem	tablet	Aucun
GridItem	clone	Aucun
GridItem	fullWidth	Aucun
GridItem	visible	Aucun
GridItem	textAlign	Aucun
GridItem	vAlign	alignSelf
GridItem	align	justifySelf

Utilisation​

Code​

Instruction d'importation​

Cahier des charges du composant​

Propriétés​

Grille​

autoRows​

blockPointerEvents​

children​

className​

columns​

gap​

hgap​

justifyContent​

justifyItems​

rows​

style​

tag​

valignItems​

vgap​

alignContentobsolète​

phoneobsolète​

phoneWideobsolète​

repeatobsolète​

tabletobsolète​

valignContentobsolète​

GridItem​

alignSelf​

colSpan​

colStart​

justifySelf​

rowSpan​

rowStart​

alignobsolète​

cloneobsolète​

fullWidthobsolète​

phoneobsolète​

phoneWideobsolète​

tabletobsolète​

textAlignobsolète​

valignobsolète​

visibleobsolète​

Crochets​

Clés de traduction​

Portes de sortie​

Exemples​

Exemple de conteneur de grille de base​

Exemple de colonnes multiples​

Exemple autoRows​

Exemples de justification​

Exemples d'alignement​

Exemple colSpan​

Exemple rowSpan​

Exemples colStart et rowStart​

Journal des modifications​

10.9.0​

Utilisation

Code

Instruction d'importation

Cahier des charges du composant

Propriétés

Grille

`autoRows`

`blockPointerEvents`

`children`

`className`

`columns`

`gap`

`hgap`

`justifyContent`

`justifyItems`

`rows`

`style`

`tag`

`valignItems`

`vgap`

`alignContent`obsolète

`phone`obsolète

`phoneWide`obsolète

`repeat`obsolète

`tablet`obsolète

`valignContent`obsolète

GridItem

`alignSelf`

`colSpan`

`colStart`

`justifySelf`

`rowSpan`

`rowStart`

`align`obsolète

`clone`obsolète

`fullWidth`obsolète

`phone`obsolète

`phoneWide`obsolète

`tablet`obsolète

`textAlign`obsolète

`valign`obsolète

`visible`obsolète

Crochets

Clés de traduction

Portes de sortie

Exemples

Exemple de conteneur de grille de base

Exemple de colonnes multiples

Exemple `autoRows`

Exemples de justification

Exemples d'alignement

Exemple `colSpan`

Exemple `rowSpan`

Exemples `colStart` et `rowStart`

Journal des modifications

10.9.0