MaterializeCSS - Grid Layout mit verschiedenen Höhen

Ich mag die MaterialiseCSS mehr als zum Beispiel Bootstrap, weil sie das Google Material Design unterstützen. Ich mag es wirklich so weit, es hat viele nützliche Komponenten sogar in der Javascript-Sektion. Was mir aber am meisten fehlt, ist ein dynamisches Rasterlayout mit verschiedenen Höhen. Wenn Sie mein Englisch nicht bekommen, sehen Sie sich das Bild an. Ich würde es gern in der Abbildung 1 haben. Gibt es eine Möglichkeit, dies zu tun, ohne ein anderes Javascript-Framework/eine andere Bibliothek zu verwenden?MaterializeCSS - Grid Layout mit verschiedenen Höhen

Quelle

2016-12-07 Sylnois

Ich denke, th Es gibt keine Möglichkeit, dieses Layout in reine CSS zu bringen, da Wrapping-Algorithmen selbst für Flexbox keinen leeren Platz in Betracht ziehen und nur in die nächste Zeile springen. Ihr Beispiel ist noch komplizierter, da die Reihenfolge der Elemente von der Mindesthöhe abhängt, die bereits platzierte Objekte im Raster einnehmen. –

Sie können [diesen Algorithmus] (https://jsfiddle.net/4e32zLna/) verwenden, was zu einem n-dimensionalen Array von Spalten führt, in dem Elemente platziert sind. Legen Sie diese Spalten mit Flexbox oder prozentualer Breite aus und lassen Sie das Standardlayout Elemente in einer Spalte vertikal stapeln. Sie können es dann mit einer beliebigen Ansichts-Bibliothek rendern, z. B. Reagieren. [Siehe Lösung hier reagieren] (https://jsfiddle.net/4e32zLna/) –

Eine reine CSS-Lösung würde die Verwendung der column Eigenschaft werden zu machen.

Beachten Sie, dass dies nur funktioniert, wenn die inneren divs die gleiche Breite haben.

HTML

<section> 
    <img src="path" /> 
    <img src="path" /> 
    <img src="path" /> 
    <img src="path" /> 
</section>

CSS

body{ 
    margin: 0; 
} 

section{ 
    column-width: 300px; 
    column-gap: 5px; 
    padding: 5px; 
} 

section img{ 
    width: 100%; 
}

Demo

Pen

Quelle

2016-12-07 13:01:28 SvenL

MaterializeCSS - Grid Layout mit verschiedenen Höhen

Antwort

Verwandte Themen