Пробую изучать программирование.

Наибольший вклад в теги

Все теги (13)

Лучшие ответы пользователя

Все ответы (11)
  • Можно ли сверстать такую структуру на grid?

    @html_student Автор вопроса
    Молодой и глупый.
    Вдруг кому пригодится, реализовал решение нормальное

    <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 то переписать не проблема будет.
    Ответ написан
    Комментировать

Лучшие вопросы пользователя

Все вопросы (131)