Zum Hauptinhalt springen

Grid Layout

Grid Layout in Storybook

Überblick​

GridLayout erweitert die Grid-Komponente und vereinfacht ihre Verwendung. Wir empfehlen die Verwendung von GridLayout zum Erstellen von Layouts, da damit weitgehend die gleichen Ergebnisse wie mit Grid erzielt werden können, die Konfiguration und Verwaltung jedoch einfacher ist. Wechseln Sie zu Grid, wenn Ihr Layout komplexer ist.

<GridLayout columns={[1, 1]}>
  <SomeElement />
  <SomeElement />
</GridLayout>
Note: GridLayout umschließt automatisch alle untergeordneten Elemente in einer GridItem-Komponente, sodass Sie jedes Element als untergeordnetes Element übergeben können. Oder Sie können GridItem-Komponenten direkt übergeben und erhalten zusätzliche Kontrolle.

Während Sie das Gesamtlayout auf GridLayout-Ebene steuern, können Sie diese Einstellung auf GridItem-Ebene erweitern oder überschreiben. Weitere Informationen finden Sie in den folgenden Beispielen.

Festlegen der Eigenschaften von untergeordneten Elementen​

Die Position und das Verhalten einer Komponente können durch Wrapping mit einer GridItem-Komponente geändert werden. So kann beispielsweise eine der Komponenten zwei Spalten breit gemacht werden:

<GridLayout
  columns={[1, 1]}
  id="grid-layout">
  <GridItem colSpan={2}> 
    {   /* Item content */ }
  <GridItem>
  <GridItem> 
    {   /* Item content */ }
  <GridItem>
  <GridItem > 
    {   /* Item content */ }
  <GridItem>
</GridLayout>

Weitere Informationen zu GridItem finden Sie auf der Seite Grid.

Da GridLayout automatisch alle untergeordneten Elemente in einer GridItem-Komponente umschließt, können Sie die Eigenschaften für alle untergeordneten Elemente an einer einzigen Stelle definieren, indem Sie die Eigenschaft gridItems für GridLayout verwenden.

<GridLayout
  columns={[1, 1]}
  gridItems={[{ colSpan: 2 }, null, null]}
  id="grid-layout">
  <SomeElement /> { /* will be 2-column wide */}
  <SomeElement />
  <SomeElement /> 
</GridLayout>

defaultGridItem-Eigenschaft​

Mit der Eigenschaft defaultGridItem auf GridLayout-Ebene können Sie die Standardeinstellungen definieren, die auf untergeordnete Elemente angewendet werden, wenn keine andere Überschreibung angewendet wird.

In diesem Beispiel sind die Standardeinstellungen definiert und für das zweite untergeordnete Element ist ein anderer Wert definiert.

<GridLayout
  columns={[1, 1]}
  defaultGridItem={{ colSpan: 2, clone: false }}
  gridItems={[null, { colSpan: 1 }]}
  id="grid-layout">
  <SomeElement />
  <SomeElement />
</GridLayout>

clone-Option von GridItem​

Warning: GridItem übergibt eine style-Eigenschaft an eine umschlossene Komponente. Die Komponente muss sie dann an das zugrunde liegende HTML-Tag übergeben. Wenn dies nicht der Fall ist (bei einigen Jutro-Komponenten ist dies nicht der Fall), versuchen Sie es mit der Übergabe von clone={false} an GridItem:
<GridItem
  colSpan={2}
  clone={false}>
  <SomeElement />
</GridItem>

SomeElement wird dann in einem zusätzlichen <div>-Tag umschlossen, das stattdessen formatiert wird.

Verschachteln mehrerer GridLayout-Komponenten​

Sie können GridLayouts in einem anderen GridLayout-Element platzieren und so komplexere Designs implementieren:

<GridLayout
  columns={[1, 1]}
  id="grid-layout">
  <GridLayout id="column-1">
    <SomeElement />
    <SomeElement />
  </GridLayout>
  <GridLayout id="column-2">
    <SomeElement />
    <SomeElement />
  </GridLayout>
</GridLayout>