Минимальная ширина карточки - 360px.
Максимальная - 100%.
Отступ между колонками - 20px.
Если в контейнере нет места для двух колонок (КОНТЕЙНЕР<740px(360+360+20)), то карточки располагаются в одну колонку.
Если влезает две колонки, но не влезает три (740px<=КОНТЕЙНЕР<1140px(360+360+360+20+20)), то отображаются две колонки. Если количество карточек нечетное. При этом:
- Если количество карточек нечетное, то последняя карточка растягивается на две колонки.
Если влезает три колонки (КОНТЕЙНЕР>=1140px), отображаются три колонки. При этом:
- Если в списке одна карточка - она растягивается на три колонки.
- Если в списке 2 или 4 карточки - отображаются две колонки.
- Если количество карточек четное трем - отображаются три колонки.
- Если количество карточек четное трем + 1 карточка (7, 10, 13, 16) - последняя карточка растягивается на три колонки.
- Если количество карточек четное трем + 2 карточки (8, 11, 15, 17) - последние две карточки отображаются в две колонки.
На странице с демо можно изменить количество карточек и посмотреть, как они себя ведут. Ссылка на демо - под кодом.
.categories__list {
max-width: 1110px;
margin: 0 auto;
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}
@media (min-width: 1150px) {
.categories__list:has(.categories__item:nth-child(3n+3)) {
grid-template-columns: 2fr 1fr 1fr 2fr;
}
.categories__list:has(.categories__item:nth-child(3n+3)) .categories__item:nth-child(3n+2) {
grid-column: span 2;
}
.categories__list:has(.categories__item:nth-child(3n+3)) .categories__item:nth-last-child(1),
.categories__list:has(.categories__item:nth-child(3n+3)) .categories__item:nth-last-child(2) {
grid-column: span 2;
}
.categories__list:has(.categories__item:nth-child(3n):last-child) {
grid-template-columns: 1fr 1fr 1fr;
}
.categories__list:has(.categories__item:nth-child(3n):last-child) .categories__item {
grid-column: span 1;
}
.categories__list:has(.categories__item:nth-child(2):last-child),
.categories__list:has(.categories__item:nth-child(4):last-child) {
grid-template-columns: 1fr 1fr;
}
.categories__list:has(.categories__item:nth-child(2):last-child) .categories__item,
.categories__list:has(.categories__item:nth-child(4):last-child) .categories__item {
grid-column: span 1;
}
.categories__list:has(.categories__item:first-child:last-child) {
grid-template-columns: 1fr;
}
.categories__list:has(.categories__item:first-child:last-child) .categories__item {
grid-column: span 1;
}
.categories__list:has(.categories__item:nth-child(3n+7):last-child) {
grid-template-columns: 2fr 1fr 1fr 2fr;
}
.categories__list:has(.categories__item:nth-child(3n+7):last-child) .categories__item {
grid-column: span 1;
}
.categories__list:has(.categories__item:nth-child(3n+7):last-child) .categories__item:nth-child(3n+2) {
grid-column: span 2;
}
.categories__list:has(.categories__item:nth-child(3n+7):last-child) .categories__item:nth-child(3n+7):last-child {
grid-column: 1/-1;
}
}
@media (max-width: 1149px) {
.categories__list:has(.categories__item:nth-child(2n)) {
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}
.categories__list:has(.categories__item:nth-child(odd):last-child) .categories__item:nth-child(odd):last-child {
grid-column: 1/-1;
}
.categories__list:has(.categories__item:first-child:last-child) {
grid-template-columns: 1fr;
}
.categories__list:has(.categories__item:first-child:last-child) .categories__item {
grid-column: span 1;
}
}
Поделиться