В коде ниже есть две части с кодом, первая часть отвечает за стандартные блоки именно с карточками – это класс uc-window, а вторая часть за блоки из раздела "Заголовок" или "Текстовый блок" – это класс uc-title
При определённых знаниях CSS вы можете доработать этот код под свои задачи и адаптировать блоки не только под десктопное разрешение, но и планшеты и мобилки, чтобы у вас блок всегда максимально тянулся на всю ширину экрана
В коде прописаны дополнительные комментарии, по которым вам будет проще ориентироваться
При определённых знаниях 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>
