# Grid

Spalten passen die Breite: jede hat eine Mindestbreite und, darunter, umwickelt. Es geht nie über den Bildschirm hinaus.

## Playground

```html
<div class="feitio-grid" data-gap="1" style="--feitio-grid-min: 6rem"><span class="lay-box">1</span><span class="lay-box">2</span><span class="lay-box">3</span><span class="lay-box">4</span><span class="lay-box">5</span></div>
```

## Wann verwenden

-   Jedesmal wenn es Platz zwischen Teilen: Platz gehört zum Elternteil, und nur ein Schritt der Skala.

## Wann nicht verwenden

-   **Für einen Komponente inneren Padding:** es kommt bereit.
-   **Mit einer handgeschriebenen Rand entlang:** nie; der Check versagt es.

## Beispiele

### Raster

Sechs Teile von mindestens 9rem, bei `space-3`.

Code anzeigen

```html
<div class="feitio-grid" data-gap="3" style="--feitio-grid-min: 9rem">
  …
</div>
```

```jsx
<Grid gap={3} min="9rem">
  …
</Grid>
```

### Eine andere schmalste Spalte

Mit `--feitio-grid-min: 6rem` passen mehr Spalten; mit 15rem weniger. Die Zahl der Spalten kommt aus der Breite, nie aus einer festen Zahl.

Code anzeigen

```html
<div class="feitio-grid" data-gap="3" style="--feitio-grid-min: 6rem">…</div>
<div class="feitio-grid" data-gap="3" style="--feitio-grid-min: 15rem">…</div>
```

### Eine leere Zelle

Wenn ein Teil fehlt, rücken die anderen an seine Stelle. Um den Platz zu halten (eine Karte, die noch kommt), setz einen Raum mit der gestrichelten Linie, die in Feitio „hier ist ein Raum“ bedeutet.

Code anzeigen

```html
<div class="feitio-grid" data-gap="3">
  <article>…</article>
  <article>…</article>
  <div class="slot" aria-hidden="true"></div>  <!-- o tracejado: um espaço -->
  <article>…</article>
</div>
```

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-grid"`

erforderlich

Das Layout.

`data-gap`

`1` bis `7`

Der Abstand zwischen den Elementen. In React kompiliert kein anderer Wert.

`min`

eine Breite

Die Mindestbreite jeder Spalte.

Die Regeln und ein ganzes Formular, das mit allen drei erstellt wurde, finden sich in [Layout](/de/dev/layout/).