Отзывчивая, динамичная галерея миниатюр: Последняя строка не работает

Question

Я хочу создать отзывчивую галерею миниатюр: http://www.moviesite.de/TEST/MAM/imagewall.html Все работает, за исключением последней строки: Изображения слишком большие. Что я могу сделать, чтобы эти изображения были такими же большими, как изображения в строках раньше?

Благодаря

Answer 1

Вы должны добавитьпризрак/наполнитель элементов.

Я нашел скрипку с решением для вашей задачи here.

.container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    padding: 0.5em; 
 
    background-color: royalblue; 
 
} 
 

 
.item { 
 
    flex: 1 0 80px; 
 
    margin: 0.5em; 
 
    padding: 1em; 
 
    text-align: center; 
 
    background-color: lightblue; 
 
} 
 

 
.filler { 
 
    flex: 1 0 80px; 
 
    height: 0px; 
 
    margin: 0 0.5em; 
 
    padding: 0 1em; 
 
}

<div class="container"> 
 
    <div class="item">sm</div> 
 
    <div class="item">medium</div> 
 
    <div class="item">large item</div> 
 
    <div class="item">medium</div> 
 
    <div class="item">medium</div> 
 
    <div class="item">large item</div> 
 
    <div class="item">sm</div> 
 
    <div class="item">sm</div> 
 
    <div class="item">medium</div> 
 
    <div class="item">large item</div> 
 
    <div class="item">medium</div> 
 
    <div class="item">medium</div> 
 
    <div class="item">large item</div> 
 
    <div class="item">sm</div> 
 

 
    <div class="filler"></div> 
 
    <div class="filler"></div> 
 
    <div class="filler"></div> 
 
    <div class="filler"></div> 
 
    <div class="filler"></div> 
 
    <div class="filler"></div> 
 
    <div class="filler"></div> 
 
    <div class="filler"></div> 
 
</div>