Grid

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

Auf dieser Seite

Playground

12345

Abstand (gap)

Schmalste Spalte

Teile

Hintergrund

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

Piece 1Piece 2Piece 3Piece 4Piece 5Piece 6

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>

React

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

12345678

1234

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>

12leer345

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.