Was ist ein Bento Grid und wie mache ich es selbst? (Anleitung mit HTML und CSS)

Seit ein paar Monaten gibt es einen Webseiten-Trend der immer mehr an Fahrt aufnimmt und das ist das sogenannte Bento-Grid. Ein Grid kennt ihr ja, das sind so Kästchen/Boxen die regelmässig verteilt werden. Viele CMS sind auch darauf basierend – wie Elementor oder eben DIVI. Aber anstatt dass die Kästchen alle gleich gross sind, kann man die ja auch mit den Nachbarfeldern verknüpfen und das ist dann ein Bento-Grid.

Wenn ihr auf den folgenden Link klickt, dann findet ihr viele Bento-Grid-Beispiele: https://bentogrids.com/

Nun gibt es verschiedene Möglichkeiten, wie man so ein Bento-Grid programmiert, und heute zeige ich euch mal eine Version.

Bevor ihr anfangt, solltet ihr euch mal kurz aufzeichnen, wie euer Bento-Grid aussehen soll. Startet dann vom normalen Grid und verbindet die Felder:

Sobald das aufgezeichnet ist, könnt ihr es verbinden und dann wisst ihr, wo welches Feld steht, wie viele es sind und wie die Reihenfolge genau ist.

Denkt daran, es läuft alles von Zeile zu Zeile und von links nach rechts.

Video

HTML

<div class="bento-container">
        <div class="box" style="grid-area: box1">item</div>
        <div class="box" style="grid-area: box2">item</div>
        <div class="box" style="grid-area: box3">item</div>
        <div class="box" style="grid-area: box4">item</div>
        <div class="box" style="grid-area: box5">item</div>
        <div class="box" style="grid-area: box6">item</div>
        <div class="box" style="grid-area: box7">item</div>
        <div class="box" style="grid-area: box8">item</div>
    </div>

CSS

.bento-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    /*grid-template-rows: 200px 200px 200px;*/
    grid-template-rows: repeat(3, minmax(200px, auto));
    gap: 10px;
    grid-template-areas: 
    "box1 box2 box2 box3"
    "box1 box4 box5 box5"
    "box6 box6 box7 box8";
}

.box {
    background-color: #0071ff;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}