Module «grid-logos». Рандомное расположение логотипов.

Source:

https://html.ildar-meyker.ru/html-imba/components.html?tab=tab-grids

Демо:

https://codepen.io/ildar-meyker/pen/BabXxRw

Плагины:

Подключение:

//

Разметка:

//

 <div class="grid-logos grid-logos--type-1 grayscale">
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/1.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/2.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/3.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/4.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/5.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/6.svg" alt="" />
        </div>
    </div>
</div>

<div class="grid-logos grid-logos--type-2 grayscale">
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/1.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/2.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/3.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/4.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/5.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/6.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/1.svg" alt="" />
        </div>
    </div>
</div>

<div class="grid-logos grid-logos--type-3 grayscale">
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/1.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/2.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/3.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/4.svg" alt="" />
        </div>
    </div>
</div>

<div class="grid-logos grid-logos--type-4 grayscale">
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/1.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/2.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/3.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/4.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/5.svg" alt="" />
        </div>
    </div>
</div>

<div class="grid-logos grid-logos--type-5 grayscale">
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/1.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/2.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/3.svg" alt="" />
        </div>
    </div>
</div>

<div class="grid-logos grid-logos--type-6 grayscale">
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/1.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/2.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/3.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/4.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/5.svg" alt="" />
        </div>
    </div>

    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/1.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/2.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/3.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/4.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/5.svg" alt="" />
        </div>
    </div>

    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/1.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/2.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/3.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/4.svg" alt="" />
        </div>
    </div>
    <div>
        <div class="grid-logos__image">
            <img src="img/temp/logos/5.svg" alt="" />
        </div>
    </div>
</div>

Стили:

//

.grid-logos {
    display: grid;
    grid-auto-rows: 11.4rem;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid #cccccc;
    border-width: 1px 1px 0 0;

    > div {
        position: relative;
        border: 1px solid #cccccc;
        border-width: 0 0 1px 1px;

        font-weight: bold;

        img {
            max-width: 14rem;
            max-height: 6rem;
        }
    }

    &--type-1 {
    }

    &--type-2 {
        grid-template-columns: repeat(6, 1fr);

        > div {
            grid-column: span 2;

            &:nth-child(7n + 5),
            &:nth-child(7n + 6) {
                grid-column: span 1;
            }
        }
    }

    &--type-3 {
        > div {
            &:nth-child(8n + 1),
            &:nth-child(8n + 2),
            &:nth-child(8n + 6),
            &:nth-child(8n + 7) {
                grid-row: span 2;
            }
        }
    }

    &--type-4 {
        > div {
            &:nth-child(10n + 1),
            &:nth-child(10n + 8) {
                grid-row: span 2;
            }
        }
    }
    &--type-5 {
        > div {
            grid-row: span 2;
        }
    }

    &--type-6 {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: auto;

        > div {
            &:before {
                content: " ";
                padding-top: 100%;
                display: block;
            }

            &:nth-child(10n + 1),
            &:nth-child(10n + 8) {
                grid-row: span 2;
                grid-column: span 2;
            }
        }
    }

    &__image {
        @include fill;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

Инициализация:

//