Bilderreihe

- TODO: Beispielbilder hinzufügen, wie 1kb Dateien.

Verwendung ::img-row

Du kannst festlegen, wie viele Spalten bzw. Bilder in jeder Reihe angezeigt werden sollen.

Leer

::img-row{cols=3}

::

Beispiel 3 Spalten

::img-row{cols=3}

![Matthias](<url>/Matthias.png)

![Romi](<url>/romi.png)

![Poncho](<url>/Poncho.png)

::

Ergebnis sieht so aus:

Leere Zeile beibehalten!

Es ist wichtig, eine leere Zeile zwischen den Bildern in der ::img-row Komponente zu lassen, sonst werden die Bilder nicht in den richtigen Spalten angezeigt.

Siehe Beispiel:

::img-row{cols=4}

❌ keine leere Zeile dazwischen:

![Matthias](<url>/Matthias.png)
![Romi](<url>/romi.png)

✅ leere Zeile dazwischen:

![Poncho](<url>/Poncho.png)

![Romi](<url>/romi.png)

::

Mobil optimiert

Die Komponente ist für mobile Geräte optimiert. Wenn du z.B. ::img-row{cols=6} verwendest, werden nicht 6 winzige Bilder auf dem Mobilbildschirm angezeigt, sondern sie werden in 3 Reihen aufgeteilt.

Wenn du ungerade Zahlen verwendest, z.B. ::img-row{cols=6}

::img-row{cols=6}

![curry](https://source.unsplash.com/random/400x400/?curry)

![safran](https://source.unsplash.com/random/400x400/?safran)

![Knoblauch](https://source.unsplash.com/random/400x400/?Garlic)

![Koriander](https://source.unsplash.com/random/400x400/?coriander)

![Wasabi](https://source.unsplash.com/random/400x400/?wasabi)

![Kreuzkümmel](https://source.unsplash.com/random/400x400/?Cumin)

::