Bootstrap: Problem mit Nesting von Cols

    Ein freundliches Hallo in die Runde.


    Ich benötige euer Schwarmwissen:


    Ich "scheitere" aktuell zwar nicht an Joomla, aber an Bootstrap und hoffe, hier trotzdem Hilfe zu bekommen. Ich möchte folgendes tun:


    Für meine Referenzen möchte ich jeweils ein Bild verwenden. Diese Bilder möchte ich gerne im Grid anordnen (über cols.) Zudem möchte ich Anordnung der Bilder bzw. die Grössen der Bilder kombinieren können. Es sollen folgende Optionen möglich sein:

    Grosses Bild | Grosses Bild -> Dies kann ich problemlos abbilden
    Kleines Bild | Kleines Bild | Kleines Bild | Kleine Bild -> Dies kann ich problemlos abbilden.

    Grosses Bild | 4x kleines Bild angeordnet mit 2 Bilder pro Zeile -> Hier stehe ich an


    Das Ziel soll sein, dass die zwei Zeilen der kleinen Bilder genau gleich gross sind, wie das eine Grosse Bild. Das schaffe ich nicht, das grosse Bild ist ein paar Pixel zuwenig hoch. Die Differenz der Bildhöhe scheint in einem Verhältnis zur Gutterbreite zu haben. Hier der aktuelle Stand:

    file:///C:/xampp/htdocs/myworks/rumede/index_test.html


    ich habe zudem ein Screenshot angehängt, der aufzeigt, was das Ziel wäre.



    Reto

    Hallo und herzlich Willkommen hier!


    Zitat von RuMeDe

    file:///C:/xampp/htdocs/myworks/rumede/index_test.html

    Das ist eine Datei auf deinem Computer. Da (hoffentlich) keiner von uns Zugriff auf deinen Computer hat, müsstest du die Datei einmal auf deinen Webserver laden und den Link hier posten, der mit https:// beginnen sollte. ;)

    Hmm, nicht so einfach. Da im Grid nur die Breite definiert ist, nicht aber die Höhe, lässt sich das über margins kaum lösen. Ich habe einen Ansatz, der m.E. in die richtige Richtung geht:


    CSS
    .row .row > * {
  margin-top: 0;
}
.row .row {
  align-content: space-between;
}

    Dafür müsstest du aus den verschachtelten divs .col-6 und .row:

    ...einen einzigen mit col und row machen:

    Dann ist die Zelle nur noch ein Stück zu weit links, dafür finde ich gerade spontan noch keine Lösung. Aber vielleicht hat ja noch jemand eine Idee.