Aller au contenu principal

GridArea

Permets de générer les enfants d'une grille CSS. Chaque enfant créé correspond à une zone de la grille.

info

Les fonctions suivantes dépendent de la librairie styled-components.

Références​

const gridArea = (nb: number) => FlattenSimpleInterpolation;

Paramètres​

  • nb
    • Requis
    • Nombre d'enfants à générer (exemple : 3).

Exemple​

import { gridArea }  from '@creatic/reactic-utils';

const Grid = styled.div`
  display: grid;
  ${gridArea(3)};
`;

const App = () => (
  <Grid>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </Grid>
);

Résultat​

<div>
  <div style="grid-area: area_1">1</div>
  <div style="grid-area: area_2">2</div>
  <div style="grid-area: area_3">3</div>
</div>