Erledigt - Wie bekomme ich dieses Grid hin?

[Fugel]

Hallo Leute,

ich versuche gerade ein bestimmten Aufbau von verschiedenen Div-Boxen zu erreichen den ich allerdings nicht so hin bekomme wie ich es gern hätte. Hier mal ein Bild wie es gern sein sollte:



Links wie es sein sollte und rechts wie es leider ist.

Mir geht es hier um die rote Box, leider klappt das nicht so einfach, da die untere Reihe eine Zeile weiter nach unten springt und sich nicht wie gewollt schön einfügt. Hat jemand eine Idee wie ich das realisieren kann? Benutze Bootstrap als Framework und platziere alle Boxen in ein ".row", die Boxen in dem ".row" Conatiner sind alle gefloated und müssen es auch bleiben.


Danke schonmal ;-)

 

[patrick_l]

Hi @Fugel,

das ganze funktioniert relativ einfach über CSS3 Flexbox. Mit Flexbox würden sich die einzelnen Kolumnen (columns) innerhalb einer Spalte (row) der Größe anpassen. Der Support für Flexbox kommt jedoch erst mit der kommenden 4er Version von Bootstrap.

Flexbox support has finally come to Bootstrap. Opt-in to the new CSS layout styles with the flick of a variable or the swap of a stylesheet.

Quelle:

Hier ein weiterer Link:


Da Flexbox erst mit der 4er kommen wird, müsstest du das ganze »manuell« in deinem CSS notieren. Daher mein Tipp an dich, mit CSS Flexbox beschäftigen und so deiner Website das gewünschte Aussehen verpassen.

Edit:
Hier auch nochmal ein Flex-Grid, welches du adaptieren könntest.

- Flexbox Grid

Liebe Grüße, Patrick

 

[Fugel]

Hallo Patrick,

danke für die Info, da werde ich mich jetzt gleich mal mit beschäftigen. Was Bootstrap 4 angeht: ICH WARTE SCHON!!!

Falls sich noch Fragen auftun, so wende ich mich vertrauensvoll wieder hier her xD

 

[patrick_l]

danke für die Info, da werde ich mich jetzt gleich mal mit beschäftigen. Was Bootstrap 4 angeht: ICH WARTE SCHON!!!

Da Bootstrap 4 wohl noch etwas auf sich warten lässt, könntest du vorerst ja dein CSS um folgendes Snippet ergänzen. Danach lediglich in deinem Markup die neuen Klassen verwenden. Ich wünsche gutes gelingen.

html,body {
    height:100%;
}
   
.row-flex, .row-flex > div[class*='col-'] {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 1 auto;
}

.row-flex-wrap {
    -webkit-flex-flow: row wrap;
    align-content: flex-start;
    flex:0;
}

.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
     margin:-.2px; /* hack adjust for wrapping */
}

.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
    width:100%;
}


.flex-col {
    display: flex;
    display: -webkit-flex;
    flex: 1 100%;
    flex-flow: column nowrap;
}

.flex-grow {
    display: flex;
    -webkit-flex: 2;
    flex: 2;
}

Quelle:

Liebe Grüße, Patrick

 

[Fugel]

Hi @Fugel,

das ganze funktioniert relativ einfach über CSS3 Flexbox. Mit Flexbox würden sich die einzelnen Kolumnen (columns) innerhalb einer Spalte (row) der Größe anpassen. Der Support für Flexbox kommt jedoch erst mit der kommenden 4er Version von Bootstrap.


Hier ein weiterer Link:


Da Flexbox erst mit der 4er kommen wird, müsstest du das ganze »manuell« in deinem CSS notieren. Daher mein Tipp an dich, mit CSS Flexbox beschäftigen und so deiner Website das gewünschte Aussehen verpassen.

Edit:
Hier auch nochmal ein Flex-Grid, welches du adaptieren könntest.

- Flexbox Grid

Liebe Grüße, Patrick

Jetzt muss ich doch nochmal fragen...ich hab mir das jetzt mal angeschaut und versteh nicht so recht wie mir das weiter helfen soll, bist du sicher das wir nicht an einnander vorbei reden?

 

[patrick_l]

Jetzt muss ich doch nochmal fragen...ich hab mir das jetzt mal angeschaut und versteh nicht so recht wie mir das weiter helfen soll, bist du sicher das wir nicht an einnander vorbei reden?

Ich habe dich schon richtig verstanden. Die Kolumnen innerhalb einer Spalte (row), werden gefloatet. Soweit so gut. Jetzt soll lediglich eine von denen, die komplette Höhe der Spalte annehmen. Genau das funktioniert wie gesagt relativ einfach über Flexbox.

Ich muss jetzt nochmal kurz los. Wenn ich später zurück bin, schau ich mir das ganze nochmal an. Kann dir nichts versprechen, wenn ich aber die Zeit dazu finde, dir nen weiteres Snippet zukommen lasse. Oder du schaust dir in der Zeit das Flexbox-Modell an.

- A Complete Guide to Flexbox | CSS-Tricks
- Jonas Helwig (kulturbanause): Einführung in das Flexbox-Model
- Schnelle Treffer mit dem Flexbox-Modell - HTML5 Rocks

Liebe Grüße, Patrick

 

[Fugel]

Die Kolumnen innerhalb einer Spalte (row), werden gefloatet. Soweit so gut. Jetzt soll lediglich eine von denen, die komplette Höhe der Spalte annehmen.

Sollte vielleicht dazu sagen das die eine Box nicht die Höhe der Spalte annehemn soll, sondern das sie bereits eine fixe höhe hat, die genau so hoch ist wie eben zwei Reihen zusammen. Das funktioniert auf der linken Seite sehr gut ohne weiteres zutun, nur eben auf der rechten nicht.

 

[patrick_l]

Sollte vielleicht dazu sagen das die eine Box nicht die Höhe der Spalte annehemn soll, sondern das sie bereits eine fixe höhe hat, die genau so hoch ist wie eben zwei Reihen zusammen. Das funktioniert auf der linken Seite sehr gut ohne weiteres zutun, nur eben auf der rechten nicht.

Achso, das funktioniert über »nesting«. Also das weitere Verschachteln von Kolumnen. Dafür innerhalb einer Kolumne eine weitere Spalte festlegen. Diese unterteilst du dann in weitere Kolumnen.

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-6">
                </div>
                <div class="col-md-6">
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                </div>
                <div class="col-md-6">
                </div>
            </div>
        </div>
        <div class="col-md-4">
        </div>
    </div>
</div>

So, muss dann mal los. Bis später.

Liebe Grüße, Patrick

 

[Fugel]

Ach ich bin so doof. Wenn man den Tag davor sitzt, dann denkt man manchmal wirklich viel zu kompliziert und vergisst die einfachsten Sachen wieder. Hätte ich echt selbst drauf kommen können und ich schäme mich für die Frage.

Dazu sag ich jetzt nix mehr und verweigere jede Aussage. Danke das du meinem weichgekochten Gehirn auf die Sprünge geholfen hast.

 

[patrick_l]

Ach ich bin so doof. Wenn man den Tag davor sitzt, dann denkt man manchmal wirklich viel zu kompliziert und vergisst die einfachsten Sachen wieder.

Ich kann dich beruhigen, nicht nur dir geht es so. Da ich überwiegend Nachts arbeite, es vor allem in den frühen Morgenstunden merke. Auf Grund von Müdigkeit und der einhergehenden sinkenden Konzentration dann auch schnell ins Grübeln komme und doch nochmal die ein oder andere Dokumentationaufrufen muss. Auch so kann ich mir nicht alles behalten.

Es fängt bei den unterschiedlichen Klassen schon an. Bootstrap nutzt andere Namen als beispielsweise Foundation oder Skeleton. Die Basics sind da das kleinste Problem. Sobald es ans Eingemachte geht, doch nochmal die Dokumentionen überfliege. Wie dem auch sei, dein Problem wurde gelöst. Das ist die Hauptsache. Wäre super wenn du den Thread auch noch als erledigt kennzeichnen würdest. Dazu einfach über dem ersten Post auf Bearbeiten und den Präfix Erledigt auswählen.

Edit:
Der Vollständigkeit halber nochmal nen Snippet für »nesting columns« erstellt:
-
- Bootstrap Dokumentation » Nesting Columns

Schönen Abend noch und liebe Grüße, Patrick