diff --git a/docs/update.md b/docs/update.md index d01a813..a3e4fe6 100644 --- a/docs/update.md +++ b/docs/update.md @@ -1,5 +1,8 @@ # 업데이트 로그 +## 2026-04-01 v1.3.23 +- 내 티어표 목록 그리드는 auto-fit 최대폭 방식 대신 게임 목록과 같은 4/3/2/1열 고정 반응형 규칙으로 맞춰, 넓은 화면에서 카드 한 장이 애매하게 다음 줄로 떨어지며 여백이 크게 남던 문제를 줄임. + ## 2026-04-01 v1.3.22 - 내 티어표 카드는 게임 목록과 같은 상단 히어로/패널 문법으로 다시 맞추고, 깨진 썸네일은 alt 텍스트가 카드 폭을 밀지 않도록 플레이스홀더로 즉시 대체해 카드 수와 헤더 폭이 흔들리지 않게 보정함. - 오른쪽 사이드 광고 프레임은 별도 보더·패딩·배경을 제거해, 광고 자체가 가진 각진 형태와 색이 그대로 보이도록 더 담백하게 정리함. diff --git a/frontend/src/views/MyTierListsView.vue b/frontend/src/views/MyTierListsView.vue index 28a441b..e7b4a8b 100644 --- a/frontend/src/views/MyTierListsView.vue +++ b/frontend/src/views/MyTierListsView.vue @@ -149,8 +149,7 @@ function openList(t) { } .list { display: grid; - grid-template-columns: repeat(auto-fit, minmax(260px, 320px)); - justify-content: start; + grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .boardCard { @@ -283,7 +282,17 @@ function openList(t) { .boardCard__date { font-size: 10px; } -@media (max-width: 720px) { +@media (max-width: 1400px) { + .list { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} +@media (max-width: 1200px) { + .list { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} +@media (max-width: 900px) { .list { grid-template-columns: 1fr; }