Pinterest macht es in der Kategorieübersicht vor und beweist dass es möglich ist. Ok, da wird ein dickes JavaScript hergenommen welches die einzelnen Boxen absulot positioniert. Is ne Lösung, aber es geht auch schlanker, mit etwas CSS.

Hier das HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="boxes">
    <div class="box">
        <img src="http://placekitten.com/400/300" alt="PlaceKitten" />
        <p>Jean shorts street art flexitarian ... </p>
    </div>
    <div class="box">
        <img src="http://placekitten.com/g/400/300" alt="PlaceKitten" />
        <p>Leggings pour-over banksy, DIY wolf tattooed ... </p>
    </div>
    <div class="box">
        <img src="http://placekitten.com/500/450" alt="PlaceKitten" />
        <p>Put a bird on it viral wolf, 3 wolf moon ... </p>
    </div>
    <!-- and so on ... -->
</div>

Und hier wirds schön:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.boxes {
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    column-count: 3;
    column-gap: 10px;
    column-fill: auto;
}

.box {
    -moz-column-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    column-break-inside: avoid;
    display:inline-block;
    padding:10px;
}

Gebraucht hab ich das gerade für ein Projekt und gefunden habe ich den Trick auf CSSDeck.com. Schöne Lösung, funktioniert, ich bin zufrieden und muss nicht lange basteln :-)

4 Meinungen zu “(CSS) Boxen im Pinterest-Style

  1. Hallo Peter Pfeufer,

    diese Boxen sehen wirklich super aus und beschränken sich im Wesentlichen auf wenig Code. Das macht es umso spannender und hat mir wirklich geholfen.

    Allerdings ist mir bei deinem CSS-Code noch etwas aufgefallen: In Zeile 1 des css-Codes müsste doch eigentlich statt .boxes, #boxes stehen, oder?! Es handelt sich ja schließlich um eine ID und nicht um eine class.

  2. Hi Peter,
    bin irgendwie mal vor einigen Monaten zufällig über deine Seite gestolpert und besuche sie fast regelmäßig.
    Wieder einmal ein schöner Beitrag.
    Ich nutze diese CSS-Boxen seit kurzer Zeit anstelle komplizierter CSS-ID’s und CSS-Klassen.
    Selbst als „Hobby-Programmierer“ verstehe ich nicht, warum selbst für kleine Grafikspielerein a la Fade-over-Effect etc. sofort die JavaScript -Keule geschwungen wird. Man kann erstaunlich viel mit CSS realisieren, man muss sich nur ein wenig schlau lesen.

    Weiter so.
    Gruß

Schreibe einen Kommentar

Ihre Email-Adresse wird nicht veröffentlicht. Pflichtfelder sind durch * markiert.

Sie können folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>