Позиционирование блоков и отступы

Question

Есть 5 карточек, нужно чтобы у них отступы были 30px, но размеры у карточек разные. При gap 30px де карточки уходят низ

js

async function fetchata() {
    try {
        const response = await fetch ('artistCard.json');

        if (!response) {
            throw new Error('Не отображается JSON');
        } 
        const data = await response.json();
        const artistCard = document.querySelector('.artist__card');

        data.forEach(({id, img, alt, figure, figureAlt, who, name}) => {
            const cardEl = `
                <div id="${id}" class="artist__card_item">
                    <figure class="figure">
                        <img src="${figure}" alt="${figureAlt}">
                        <div class="figure__info">
                            <p class="figure__info_who">${who}</p>
                            <p class="figure__info_name">${name}</p>
                        </div>
                    </figure>
                    <img class="artist__card_item-img" src="${img}" alt="${alt}">
                </div>
            `;
            artistCard.insertAdjacentHTML('beforeend', cardEl); 
        });
    } catch (error) {
        console.log(error);
    }
};

fetchata()

style

    &__card {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;

        &_item {
            position: relative;
            
            .figure {
                position: absolute;
                bottom: 24px;
                left: 24px;
                display: flex;
                flex-wrap: wrap;
                gap: 12px;

                &__info {

                    &_who {
                        @include text (400, 14px, 22.4px, $textWhite);
                        margin-bottom: 4px;
                    }

                    &_name {
                        @include text (700, 16px, 19.2px, $textWhite);
                    }
                }
            }

            &:nth-child(1) {
                width: 300px;
                height: 311px;
            }

            &:nth-child(2) {
                width: 520px;
                height: 311px;
            }

            &:nth-child(3) {
                width: 410px;
                height: 652px;
            }
            
            &:nth-child(4) {
                width: 410px;
                height: 311px;
            }

            &:nth-child(5) {
                width: 410px;
                height: 311px;
            }
        }
    }

Получилось

Надо так

Answer 1

Конкретно для этого случая решение может выглядеть так, но это частный случай, именно для таких размеров элементов. При изменении количества и размеров элементов (например другие изображения) все может оказаться искажено. К тому же это абсолютно не адаптивный вариант, при уменьшении размеров страницы появляются полосы прокрутки, карточки не переносятся. Если нужен адаптив, то нужно начинать с того, что сами карточки должны быть адаптивны.

.list {
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, min-content);

    gap: 30px;
    background-color: #333;
    width: min-content;
}

.item:nth-child(1) {
    width: 300px;
    height: 311px;

    background-color: #aaa;
}

.item:nth-child(2) {
    grid-column: span 2;
    width: 520px;
    height: 311px;

    background-color: #a33;
}

.item:nth-child(3) {
    grid-row: span 2;
    width: 410px;
    height: 652px;

    background-color: #3a3;
}

.item:nth-child(4) {
    grid-column: span 2;
    width: 410px;
    height: 311px;

    background-color: #33a;
}

.item:nth-child(5) {
    width: 410px;
    height: 311px;

    background-color: #aa3;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="list">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>

</html>

БЛОГ НА HUSL

Позиционирование блоков и отступы

Ответы (1 шт):