мозаичная сетка с css

Пытаюсь сделать отзывчивую мозаичную сетку, которая должна выглядеть вот так. мозаика целевой сетки

<div class="masonry grid clearfix">
        <div class="grid-item dbl-height"></div>
        <div class="grid-item mrg-on-left"></div>
        <div class="grid-item mrg-on-left dbl-width"></div>
        <div class="grid-item mrg-on-left mrg-on-top dbl-width middle-one"></div>
        <div class="grid-item mrg-on-left mrg-on-top dbl-height"></div>
        <div class="grid-item dbl-width pull-up-one bot-one"></div>
        <div class="grid-item mrg-on-left pull-up-one bot-one"></div>
</div>

и это scss для этого

    .grid {
    padding: 1px 0px;
}
.grid-item {
    padding-bottom: calc(((100% - 2px)/4));
    width: calc(((100% - 2px)/4));
    float: left;
    background: violet;
    &.dbl-height {
        padding-bottom: calc(((100% - 2px)/4)*2);
        &.right-one {
            padding-bottom: calc((((100% - 2px)/4)*2) - 1px);
        }
    }
    &.dbl-width {
        width: calc(((100% - 2px)/4)*2);
    }

    &.mrg-on-left {
        margin-left: 1px;
    }
    &.mrg-on-top {
        margin-top: 1px;
    }
    &.middle-one {
        padding-bottom: calc(((100% - 2px)/4) - 1px);
    }
    &.pull-up-one {
        margin-top: calc(((100% - 2px)/(-4)));
    }
    &.bot-one {
        padding-bottom: calc(((100% - 2px)/4) - 1px);
    }
}

Если вы посмотрите, последние два элемента сетки имеют класс «bot-one». Я сделал это плавающим и использовал трюк «padding-bottom», чтобы достичь блоков с соотношением сторон.

Однако не удается достичь эффекта .... последние 2 блока не складываются в нужное место ... что здесь не так?


css grid mosaic masonry
person Levon Grigoryan    schedule 13.06.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Сначала просмотрите последние три блока:

    <div class="grid-item mrg-on-left mrg-on-top dbl-height"></div>
    <div class="grid-item dbl-width pull-up-one bot-one"></div>
    <div class="grid-item mrg-on-left pull-up-one bot-one"></div>

Согласно спецификации, см. правило 2(https://www.w3.org/TR/CSS21/visuren.html#float-rules):

Если текущий блок является плавающим влево, и есть какие-либо плавающие влево блоки, созданные элементами ранее в исходном документе, то для каждого такого более раннего блока либо левый внешний край текущего блока должен быть справа от правого внешний край предыдущей коробки, или его верхняя часть должна быть ниже, чем нижняя часть предыдущей коробки. Аналогичные правила справедливы и для плавающих вправо ящиков.

Теперь посмотрите на последние три div, ваш третий-последний блок позволит элементу, находящемуся за ним, разместиться в четвертой строке.

Второй последний div использует margin-top, чтобы иметь отрицательное число, такое же, как его высота (padding-bottom), и это приводит к тому, что он выходит из потока (четвертая строка).

Последний div не может получить правый внешний край предпоследнего div, поэтому он использует третий-последний, и это приводит к тому, что он перекрывает предпоследний div.

overlap (черная часть — последняя div)

Быстрое исправление (добавьте нижнее поле к предпоследнему элементу): https://jsfiddle.net/L0kove74 /1/

Ссылка: Разрывы отрицательных полей плавают

person twxia    schedule 14.06.2016
comment
Спасибо, вы спасли мой день! - person Levon Grigoryan; 14.06.2016
comment
@LevonGrigoryan, можешь отметить как решение или проголосовать, спасибо :D - person twxia; 14.06.2016
comment
Я отметил, мне нужна репутация, чтобы это было видно - person Levon Grigoryan; 15.06.2016