> Grid

Grid

Grille basique sur 12 colonnes (mobile et sur web). Composant de type Box à utiliser avec <Grid.Column>.

TagsuiExemples8StylesDisponibles

TwoEqualColumns

6 colonnes

export const TwoEqualColumns = () => (
  <Grid gap={8}>
    <Grid.Column size={6}>
      <Col label="6 colonnes" />
    </Grid.Column>
    <Grid.Column size={6}>
      <Col label="6 colonnes" />
    </Grid.Column>
  </Grid>
);

AsymmetricColumns

4 colonnes

8 colonnes

export const AsymmetricColumns = () => (
  <Grid gap={8}>
    <Grid.Column size={4}>
      <Col label="4 colonnes" />
    </Grid.Column>
    <Grid.Column size={8}>
      <Col color={colColorAlt} label="8 colonnes" />
    </Grid.Column>
  </Grid>
);

ThreeColumns

4 colonnes

export const ThreeColumns = () => (
  <Grid gap={8}>
    <Grid.Column size={4}>
      <Col label="4 colonnes" />
    </Grid.Column>
    <Grid.Column size={4}>
      <Col color={colColorAlt} label="4 colonnes" />
    </Grid.Column>
    <Grid.Column size={4}>
      <Col label="4 colonnes" />
    </Grid.Column>
  </Grid>
);

FourColumns

export const FourColumns = () => (
  <Grid gap={8}>
    <Grid.Column size={3}>
      <Col label="3" />
    </Grid.Column>
    <Grid.Column size={3}>
      <Col color={colColorAlt} label="3" />
    </Grid.Column>
    <Grid.Column size={3}>
      <Col label="3" />
    </Grid.Column>
    <Grid.Column size={3}>
      <Col color={colColorAlt} label="3" />
    </Grid.Column>
  </Grid>
);

FullWidthColumn

12 colonnes (pleine largeur)

6 colonnes

export const FullWidthColumn = () => (
  <Grid gap={8}>
    <Grid.Column size={12}>
      <Col label="12 colonnes (pleine largeur)" />
    </Grid.Column>
    <Grid.Column size={6}>
      <Col label="6 colonnes" />
    </Grid.Column>
    <Grid.Column size={6}>
      <Col color={colColorAlt} label="6 colonnes" />
    </Grid.Column>
  </Grid>
);

ResponsiveColumns

12 mobile / 6 desktop

export const ResponsiveColumns = () => (
  <Grid gap={8}>
    <Grid.Column size={{ mobile: 12, desktop: 6 }}>
      <Col label="12 mobile / 6 desktop" />
    </Grid.Column>
    <Grid.Column size={{ mobile: 12, desktop: 6 }}>
      <Col color={colColorAlt} label="12 mobile / 6 desktop" />
    </Grid.Column>
  </Grid>
);

ResponsiveThreeColumns

12 mobile / 6 tablet / 4 desktop

12 mobile / 12 tablet / 4 desktop

export const ResponsiveThreeColumns = () => (
  <Grid gap={8}>
    <Grid.Column size={{ mobile: 12, tablet: 6, desktop: 4 }}>
      <Col label="12 mobile / 6 tablet / 4 desktop" />
    </Grid.Column>
    <Grid.Column size={{ mobile: 12, tablet: 6, desktop: 4 }}>
      <Col color={colColorAlt} label="12 mobile / 6 tablet / 4 desktop" />
    </Grid.Column>
    <Grid.Column size={{ mobile: 12, tablet: 12, desktop: 4 }}>
      <Col label="12 mobile / 12 tablet / 4 desktop" />
    </Grid.Column>
  </Grid>
);

WithLargeGap

gap 24

export const WithLargeGap = () => (
  <Grid gap={24}>
    <Grid.Column size={4}>
      <Col label="gap 24" />
    </Grid.Column>
    <Grid.Column size={4}>
      <Col color={colColorAlt} label="gap 24" />
    </Grid.Column>
    <Grid.Column size={4}>
      <Col label="gap 24" />
    </Grid.Column>
  </Grid>
);

Alveole UI Kit — v1.8.4