diff --git a/src/app/pages/category/category.component.scss b/src/app/pages/category/category.component.scss index ddb327d..4ed4a0b 100644 --- a/src/app/pages/category/category.component.scss +++ b/src/app/pages/category/category.component.scss @@ -95,7 +95,7 @@ .items-grid { display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin-bottom: 40px; width: 100%; @@ -103,8 +103,10 @@ .item-card { width: 100%; + min-width: 0; display: flex; flex-direction: column; + overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); &:hover { @@ -192,6 +194,7 @@ margin: 0; line-height: 1.3; display: -webkit-box; + line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; @@ -315,21 +318,21 @@ // Responsive @media (max-width: 1200px) { .items-grid { - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } } @media (max-width: 992px) { .items-grid { - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } } @media (max-width: 768px) { .items-grid { - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } @@ -353,7 +356,7 @@ } .items-grid { - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }