Masonry — как убрать неровный край понизу?

Question

[Moe Green]

Создал галлерею при помощи Masonry и Isotope.

Результат получился рабочим - master sample. Но есть одно НО - неровный край по низу галлереи.

В оригинале галлерея выглядит так - origin sample.

У меня нет никаких идей по поводу, как решиить эту задачу.

Может быть, кто-нибудь подскажет?

Answer 1

[Сергей]

codepen.io/desandro/pen/mIkhq

Comments

[Сергей]

Суть в том чтобы вместо пикселей указывать проценты в стилях к Изотопу

[Moe Green]

Сергей: интересно - надо попробовать! )

[Moe Green]

Сергей: вот так - codepen.io/gearmobile/pen/YqMZaN. может что не понимаю, но сглаживания нет. как мне кажется, решения данного вопроса не существует? )

[Moe Green]

Сергей: codepen.io/gearmobile/full/YqMZaN

[Moe Green]

Сергей: первая ссылка битая

[Сергей]

Valery Semenencko: Слушай, а ты в локалке делаешь или есть ссылка?

[Сергей]

Valery Semenencko: Все. Разобрался. Смотри. У тебя есть зашитые три вида блоков. Обычные, Широкие и Высокие. Удали все, и собери мозайку заного сам. Примерно так:

<div class="grid__controls">
	<button type="button" data-filter="*" class="grid__button">all</button>
	<button type="button" data-filter=".red" class="grid__button red">red</button>
	<button type="button" data-filter=".green" class="grid__button green">green</button>
	<button type="button" data-filter=".blue" class="grid__button blue">blue</button>
</div>
<div class="grid">
	<div class="grid__sizer red">1</div>
	<div class="grid__item green"></div>
	<div class="grid__item blue grid__item--width2"></div>
	<div class="grid__item green grid__item--height2"></div>
	<div class="grid__item blue"></div>
	<div class="grid__item blue"></div>
	<div class="grid__item blue"></div>
	<div class="grid__item red grid__item--width2"></div>
	<div class="grid__item green grid__item--height2"></div>
	<div class="grid__item red grid__item--height2"></div>
	<div class="grid__item green"></div>
	<div class="grid__item blue"></div>
	<div class="grid__item red grid__item--width2"></div>
	<div class="grid__item green"></div>
	<div class="grid__item red grid__item--width2"></div>
	<div class="grid__item red grid__item--height2"></div>
	<div class="grid__item blue"></div>
	<div class="grid__item green"></div>
</div>

Каждый div будет пристыковываться к последнему добавленному справа, если позволяет размер страницы или div в который вписан изотоп. Если нет то он перейдет на следующую строку и останеться пустое место в предыдущей строке. Можешь создать дополнительные стили в CSS, под другие размеры блоков.