Mauerwerk Grid-Layout Gebrochene bei der Initialisierung

Question

I Mauerwerk Gitter bin mit einem Bildlayout zu haben, die wie folgt lautet:

1. Reihe - zwei Bilder 50/50%

2. row- drei Bilder 33,33/33,33/33,33%

3. Reihe - zwei Bilder 50/50%

vor der Initialisierung und nur über CSS Styling arbeitet das Layout schön. Nach der Initialisierung, mit oder ohne Bilder geladen, bricht es das Layout.

http://codepen.io/byoungz/pen/JXOKqW

.grid-sizer, 
    .grid-item { 
     width: 33.33%; 
    } 

Wenn ich oben auf 25% ändern, werden die drei Spalten Bilder Linie schön einen Platz für ein viertes Bild verlassen werden. Die Bilder mit 50% Breite werden entsprechend nach oben und unten bewegt.

Wenn ich die zwei Elemente bei 50% entferne und die 33,33% Elemente einfach lasse, scheinen sie sich in einer Reihe nett aneinander zu reihen.

Ist es einfach nicht möglich, dieses Layout zu haben? Ich habe viele andere dazu gebracht, leicht zu arbeiten.

Answer 1

Ich habe herausgefunden, was mein Problem ist. Ich habe es bei der Verwendung von Prozentsätzen nicht verstanden, dass jedes Rasterelement nach Spaltenbreite DIVISIBLE sein muss.

ändern:

.grid-sizer, 
    .grid-item { 
     width: 33.33%; 
    } 

zu

.grid-sizer { 
    width: 16.667%; 
} 
.grid-item { 
    width: 33.33%; 
} 

löste mein Problem.