Артем Колчин

Question

CSS

Простой

Как сделать такие кнопки на css?

3 подписчика
03 апр.
225 просмотров

1

ответ

Answer 1 · 2024-05-12 15:10:32

Вдруг кому пригодится, реализовал решение нормальное

<div class="catalog__list">
                        <div class="catalog__item catalog__item_1"></div>
                        <div class="catalog__item catalog__item_2"></div>
                        <div class="catalog__item catalog__item_3"></div>
                        <div class="catalog__item catalog__item_4"></div>
                        <div class="catalog__item catalog__item_5"></div>
                        <div class="catalog__item catalog__item_6"></div>
                    </div>

.catalog {

    &__list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(toRem(393), 1fr));
        grid-column-gap: toRem(25);
        grid-row-gap: toRem(25);
        grid-auto-rows: toRem(393);
        grid-auto-flow: dense;
    }

    &__item {
        background-color: #eee;

        &_1, &_5 {
            grid-column: span 2; 
            grid-row: span 2;
        }

        &_4 {
            grid-row: span 2; 
        }

        &_6 {
            grid-column: span 3;   
        }
    }

}

я пишу на SCSS но принцип если вам нужен обычный css то переписать не проблема будет.