Grid

Verwendung

Bei der Grid-Komponente handelt es sich um eine technische Komponente, die die Verwendung des Grid-CSS-Stylings erleichtert. Empfehlungen für die Verwendung finden Sie in der offiziellen Dokumentation zum CSS-Grid-Layout.

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>;

Importanweisung

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

Komponentenvertrag

Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.

Eigenschaften

Grid

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

Standardwert
'medium'
hgap: Typ
'none' | 'small' | 'medium' | 'large'
Beschreibung
Horizontal gap size between the columns. If unspecified, falls back to the gap property.
justifyContent: Typ
'left' | 'center' | 'right' | 'around' | 'between' | 'evenly' | 'stretch'
Beschreibung
Justify logic for the grid within its container.

Standardwert
'stretch'
justifyItems: Typ
'left' | 'center' | 'right' | 'around' | 'between' | 'evenly' | 'stretch'
Beschreibung
Justify logic for all items within the grid.

Standardwert
'stretch'
rows: Typ
string | number[]
Beschreibung
Defines explicit row heights.
style: Typ
React.CSSProperties | undefined
Beschreibung
DOM element styles.
tag: Typ
string
Beschreibung
Optional DOM tag to render.

Standardwert
'div'
valignItems: Typ
'top' | 'middle' | 'bottom' | 'baseline' | 'stretch'
Beschreibung
Vertical alignment for all items within the grid.

Standardwert
'stretch'
vgap: Typ
'none' | 'small' | 'medium' | 'large'
Beschreibung
Vertical gap between the rows. If unspecified, falls back to the gap property.
alignContentVerworfen: Typ
'start' | 'center' | 'end' | 'baseline' | 'stretch'
Beschreibung
Aligns rows vertically within the grid container.

Standardwert
'stretch'
phoneVerworfen: Typ
Grid
Beschreibung
Any Grid properties that will be used instead for the 'phone' breakpoint. Deprecated since 10.9.0.
phoneWideVerworfen: Typ
Grid
Beschreibung
Any Grid properties that will be used instead for the 'phoneWide' breakpoint. Deprecated since 10.9.0.
repeatVerworfen: Typ
'auto-fit' | 'auto-fill' | number | string
Beschreibung
Logic for how columns will be repeated.
tabletVerworfen: Typ
Grid
Beschreibung
Any Grid properties that will be used instead for the 'tablet' breakpoint. Deprecated since 10.9.0.
valignContentVerworfen: Typ
'top' | 'middle' | 'bottom' | 'baseline' | 'stretch'
Beschreibung
Aligns rows vertically within the grid container.

Standardwert
'stretch'

GridItem

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

Standardwert
'stretch'
colSpan: Typ
number | string
Beschreibung
Specifies how many columns the element will span.
colStart: Typ
number | string
Beschreibung
Specifies a grid item's start column position within the grid.
justifySelf: Typ
'start' | 'center' | 'end' | 'stretch'
Beschreibung
Aligns the items vertically within their containers.

Standardwert
'stretch'
rowSpan: Typ
number | string
Beschreibung
Specifies how many rows the element will span.
rowStart: Typ
number | string
Beschreibung
Specifies a grid item's start row position within the grid.
alignVerworfen: Typ
'start' | 'center' | 'end' | 'stretch'
Beschreibung
Aligns the items vertically within their containers. Deprecated since 10.9.0, use justifySelf instead.
cloneVerworfen: Typ
boolean
Beschreibung
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.
fullWidthVerworfen: Typ
boolean
Beschreibung
If set to true, item takes full width of the parent grid. Ignored if colStart or colSpan is specified. Deprecated since 10.9.0.
phoneVerworfen: Typ
Grid
Beschreibung
Any Grid properties that will be used instead for the 'phone' breakpoint. Deprecated since 10.9.0.
phoneWideVerworfen: Typ
Grid
Beschreibung
Any Grid properties that will be used instead for the 'phoneWide' breakpoint. Deprecated since 10.9.0.
tabletVerworfen: Typ
Grid
Beschreibung
Any Grid properties that will be used instead for the 'tablet' breakpoint. Deprecated since 10.9.0.
textAlignVerworfen: Typ
'top' | 'middle' | 'bottom' | 'baseline' | 'stretch'
Beschreibung
Aligns text inside item. Deprecated since 10.9.0.
valignVerworfen: Typ
'top' | 'middle' | 'bottom' | 'baseline' | 'stretch'
Beschreibung
Aligns the item horizontally within its container. Deprecated since 10.9.0, use alignSelf instead.
visibleVerworfen: Typ
boolean
Beschreibung
Specifies whether the GridItem is visible. Deprecated since 10.9.0.

Hooks

Für Grid sind keine Hooks verfügbar.

Übersetzungsschlüssel

Es gibt keine Übersetzungen für Grid.

Informationen über die Verwaltung von Übersetzungen finden Sie in unserem Abschnitt über Internationalisierung.

Escape Hatches

Weitere Informationen finden Sie in unserer Dokumentation über Escape Hatches.

Beispiele

Beispiel für einen einfachen Grid-Container

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 fortgefahren 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 zusätzliche Zeilen eine 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 justifyContent-Eigenschaftssatz können Sie festlegen, 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 das 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 in einem GridItem-Set legen fest, in welcher Spalte bzw. Zeile das Element beginnt. In Kombination mit colSpan und rowSpan kö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>

Komponente	Eigenschaft	Alternative
Grid	phone	Keine
Grid	phoneWide	Keine
Grid	tablet	Keine
Grid	repeat	Keine
GridItem	phone	Keine
GridItem	phoneWide	Keine
GridItem	tablet	Keine
GridItem	clone	Keine
GridItem	fullWidth	Keine
GridItem	visible	Keine
GridItem	textAlign	Keine
GridItem	vAlign	alignSelf
GridItem	align	justifySelf

Verwendung​

Code​

Importanweisung​

Komponentenvertrag​

Eigenschaften​

Grid​

autoRows​

blockPointerEvents​

children​

className​

columns​

gap​

hgap​

justifyContent​

justifyItems​

rows​

style​

tag​

valignItems​

vgap​

alignContentVerworfen​

phoneVerworfen​

phoneWideVerworfen​

repeatVerworfen​

tabletVerworfen​

valignContentVerworfen​

GridItem​

alignSelf​

colSpan​

colStart​

justifySelf​

rowSpan​

rowStart​

alignVerworfen​

cloneVerworfen​

fullWidthVerworfen​

phoneVerworfen​

phoneWideVerworfen​

tabletVerworfen​

textAlignVerworfen​

valignVerworfen​

visibleVerworfen​

Hooks​

Übersetzungsschlüssel​

Escape Hatches​

Beispiele​

Beispiel für einen einfachen Grid-Container​

Beispiel für mehrere Spalten​

autoRows-Beispiel​

Beispiele zur Begründung​

Beispiele ausrichten​

colSpan-Beispiel​

rowSpan-Beispiel​

colStart- und rowStart-Beispiele​

Änderungsprotokoll​

10.9.0​

Verwendung

Code

Importanweisung

Komponentenvertrag

Eigenschaften

Grid

`autoRows`

`blockPointerEvents`

`children`

`className`

`columns`

`gap`

`hgap`

`justifyContent`

`justifyItems`

`rows`

`style`

`tag`

`valignItems`

`vgap`

`alignContent`Verworfen

`phone`Verworfen

`phoneWide`Verworfen

`repeat`Verworfen

`tablet`Verworfen

`valignContent`Verworfen

GridItem

`alignSelf`

`colSpan`

`colStart`

`justifySelf`

`rowSpan`

`rowStart`

`align`Verworfen

`clone`Verworfen

`fullWidth`Verworfen

`phone`Verworfen

`phoneWide`Verworfen

`tablet`Verworfen

`textAlign`Verworfen

`valign`Verworfen

`visible`Verworfen

Hooks

Übersetzungsschlüssel

Escape Hatches

Beispiele

Beispiel für einen einfachen Grid-Container

Beispiel für mehrere Spalten

`autoRows`-Beispiel

Beispiele zur Begründung

Beispiele ausrichten

`colSpan`-Beispiel

`rowSpan`-Beispiel

`colStart`- und `rowStart`-Beispiele

Änderungsprotokoll

10.9.0