Iconic – Bento-Rasterbeispiel

So erstellen Sie ein responsives Bento-Rasterlayout für Desktop und Mobilgeräte

Das Bento-Raster-Layout ist ein moderner Designansatz, der es Ihnen ermöglicht, Inhalte auf organisierte und dennoch optisch ansprechende Weise anzuordnen, ähnlich einer japanischen Bento-Box.
Diese Struktur wird häufig für Dashboards, Zielseiten und inhaltsreiche Abschnitte verwendet.
Wenn Sie ein ähnliches Layout erstellen möchten, können Sie den unten angegebenen Beispielcode verwenden.

Sie erhalten den notwendigen Code, um ein Bento-Rasterlayout für die Desktop- und Mobilansicht zu erstellen. Mit diesem Code können Sie Ihr Layout einfach strukturieren und gleichzeitig die Konsistenz über verschiedene Bildschirmgrößen hinweg sicherstellen.

Wichtiger Hinweis:
Die Anzahl der Blöcke, die Sie in Ihren Code einfügen, muss mit der Anzahl der Blöcke im Bento Grid-Layout übereinstimmen . Wenn die Anzahl nicht übereinstimmt, funktioniert das Layout nicht richtig .

Wenn Sie dieser Struktur folgen, können Sie effizient ein ansprechendes Bento-Rasterlayout sowohl für die Desktop- als auch für die mobile Ansicht erstellen.

Die Anordnung der Blöcke für die Desktop- und Mobilversion ist wie folgt:

Beispiel 1

Desktop-Layout:

Die Anordnung der Blöcke für die Desktop-Version ist wie folgt:

'Block-1 Block-2 Block-3 Block-4'
'Block-1 Block-5 Block-5 Block-4'
'Block-6 Block-5 Block-5 Block-7'
'Block-6 Block-8 Block-9 Block-9'

Mobiles Layout:

Für mobile Bildschirme werden die Blöcke in einem gestapelten Format angeordnet:

'Block-1 Block-1'
'Block-2 Block-3'
'Block-4 Block-5'
'Block-6 Block-6'
'Block-7 Block-8'
'Block-9 Block-9'

Beispiel 2

Desktop-Layout:

Die Anordnung der Blöcke für die Desktop-Version ist wie folgt:

'Block-1 Block-1 Block-2 Block-3 Block-3 Block-4'
'Block-1 Block-1 Block-5 Block-5 Block-6 Block-7'
'Block-8 Block-9 Block-5 Block-5 Block-10 Block-11'
'Block-12 Block-13 Block-13 Block-14 Block-14 Block-15'

Mobiles Layout:

Für mobile Bildschirme werden die Blöcke in einem gestapelten Format angeordnet:

'Block-1 Block-1'
'Block-2 Block-3'
'Block-4 Block-5'
'Block-6 Block-6'
'Block-7 Block-8'
'Block-9 Block-9'
'Block-10 Block-10'
'Block-11 Block-12'
'Block-13 Block-14'
'Block-15 Block-15'

Beispiel 3

Desktop-Layout:

Die Anordnung der Blöcke für die Desktop-Version ist wie folgt:

'Block-1 Block-1 Block-2 Block-2 Block-2 Block-2'
'Block-3 Block-3 Block-4 Block-4 Block-5 Block-5'
'Block-3 Block-3 Block-4 Block-4 Block-5 Block-5'

Mobiles Layout:

Für mobile Bildschirme werden die Blöcke in einem gestapelten Format angeordnet:

'Block-1 Block-2'
'Block-3 Block-3'
'Block-4 Block-5'

Beispiel 4

Desktop-Layout:

Die Anordnung der Blöcke für die Desktop-Version ist wie folgt:

'Block-1 Block-1 Block-2 Block-3'
'Block-1 Block-1 Block-4 Block-3'
'Block-5 Block-6 Block-7 Block-7'

Mobiles Layout:

Für mobile Bildschirme werden die Blöcke in einem gestapelten Format angeordnet:

'Block-1 Block-1'
'Block-2 Block-3'
'Block-4 Block-4'
'Block-6 Block-6'
'Block-5 Block-7'

Beispiel 5

Desktop-Layout:

Die Anordnung der Blöcke für die Desktop-Version ist wie folgt:

'Block-1 Block-2 Block-2 Block-3'
'Block-1 Block-4 Block-4 Block-4'

Mobiles Layout:

Für mobile Bildschirme werden die Blöcke in einem gestapelten Format angeordnet:

'Block-1'
'Block-2'
'Block-3'
'Block-4'