Zum Hauptinhalt springen

Grid

Grid in Storybook

Beispiele​

Einfaches Beispiel​

Ein einfacher Jutro Grid-Container besteht aus einer Grid-Komponente mit einer Reihe von untergeordneten Komponenten. Wenn es sich bei diesen untergeordneten Elementen um GridItem-Komponenten handelt, können Sie die zusätzlichen GridItem-Eigenschaften verwenden, um das Element im Layout weiter zu steuern.

Beim Standardverhalten wird von einer Spalte ausgegangen und jedes neue Element wird einer neuen Zeile hinzugefügt.

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>

Beispiel für mehrere Spalten​

Durch Definieren von Spaltenbreiten können Sie weitere Spalten hinzufügen. Standardmäßig füllen Elemente jede Spalte, bevor mit der nächsten Zeile fortgewechselt wird. In diesem Beispiel werden einem zweispaltigen Grid drei Elemente hinzugefügt.

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>

autoRows-Beispiel​

Mit der autoRows-Eigenschaft können Sie die Zeilenhöhe für Zeilen bestimmen, die im Attribut rows nicht definiert sind. Auf diese Weise können Sie die Höhe festlegen, wenn die Länge des Grids unbekannt ist. In diesem Beispiel hat die erste Zeile eine Höhe von 50 Pixeln und weitere eine größere Höhe von 75 Pixeln.

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>

Beispiele zur Begründung​

Mit dem Eigenschaftssatz können Sie festlegen, justifyContent wie Spalten im Grid ausgerichtet werden.

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>

Mit dieser justifyItems-Eigenschaft wird festgelegt, wie Elemente in ihrem Container ausgerichtet werden.

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>

Um festzulegen, wie bestimmte Elemente in ihrem Container ausgerichtet werden, verwenden Sie die justifySelf-Eigenschaft für die entsprechende GridItem.

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>

Beispiele ausrichten​

Mit der alignItems-Eigenschaft legen Sie fest, wie Elemente in ihrem Container vertikal ausgerichtet werden.

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>

Um festzulegen, wie bestimmte Elemente in ihrem Container vertikal ausgerichtet werden, verwenden Sie die alignSelf-Eigenschaft für die entsprechende GridItem.

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>

colSpan-Beispiel​

Die Eigenschaft colSpan für ein GridItem-Element legt fest, wie viele Spalten das Element umfasst.

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>

rowSpan-Beispiel​

Die Eigenschaft rowSpan für ein GridItem-Element legt fest, wie viele Zeilen das Element umfasst.

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>

colStart und rowStart Beispiele​

Die Eigenschaften colStart und rowStart an GridItem legen fest, in welcher Spalte bzw. Zeile das Element beginnt. In Kombination mit colSpan und rowSpankönnen diese Eigenschaften für eine hohe Granularität der Anpassung des Grid-Layouts verwendet werden.

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>