Портфолио
YouTube
Ресурсы
Телеграм-канал
Модификации
+2
Уроки
Instagram
Заказать сайт
Поиск
Заказать сайт
Смотрите обучающее видео на YouTube канале
стандартные блоки по window-контейнеру
Смотреть
В коде ниже есть две части с кодом, первая часть отвечает за стандартные блоки именно с карточками – это класс uc-window, а вторая часть за блоки из раздела "Заголовок" или "Текстовый блок" – это класс uc-title
При определённых знаниях CSS вы можете доработать этот код под свои задачи и адаптировать блоки не только под десктопное разрешение, но и планшеты и мобилки, чтобы у вас блок всегда максимально тянулся на всю ширину экрана

В коде прописаны дополнительные комментарии, по которым вам будет проще ориентироваться
   <!--https://dsgnmax.ru/useful/window-container--> <style>

@media screen and (min-width: 1200px){
    /*-----Стили только для блоков без стандартных заголовков-----*/
    .uc-window > div{
        padding: 0 40px;    /*Отступы по бокам экрана*/
    }
    .uc-window > div > .t-container,
    .uc-window > div > [class*="container"]:not(.t-popup__container),
    .uc-window .js-feed-container,
    .uc-window .js-store-grid-cont{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;   /*Количество колонок и их размер*/
        gap: 10px 10px;  /*Отступ между колонками, первое значение – по оси Y, второй – по оси X*/
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    .uc-window .t-col:not(.t-popup__container .t-col):not(.t-feed__post-popup__content),
    .uc-window .t-item:not(.t-popup__container .t-col){
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /*Скрываем разделители*/
    .uc-window .t-container:before,
    .uc-window .t-container:after,
    .uc-window [class*="container"]:before,
    .uc-window [class*="container"]:after,
    .uc-window [class*="separator"]{
        display: none;
    }
    
    
    
    /*-----Стили для заголовков-----*/
    .uc-title > div{
        padding: 0 40px;    /*Отступы по бокам экрана*/
    }
    .uc-title > div > .t-container{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;   /*Количество колонок и их размер*/
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important; 
        gap: 10px;   /*Отступ между колонками*/
    }
    
    .uc-title > div > .t-container > .t-col{
        grid-column: 2 / 3 span;    /*Блок начинается со второй колонки и занимает 3 колонки*/
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }  
    
    /*Скрываем разделители*/
    .uc-title .t-container:before,
    .uc-title .t-container:after,
    .uc-title [class*="container"]:before,
    .uc-title [class*="container"]:after,
    .uc-title [class*="separator"]{
        display: none;
    }
}
</style>
Made on
Tilda