diff --git a/src/main/resources/templates/comment-cards.html b/src/main/resources/templates/comment-cards.html
index 764123b..da19ce8 100644
--- a/src/main/resources/templates/comment-cards.html
+++ b/src/main/resources/templates/comment-cards.html
@@ -13,10 +13,12 @@
         .cc-btn { background:var(--primary-gradient); color:#fff; border:none; border-radius:8px;
             padding:.55rem 1rem; font-weight:600; cursor:pointer; font-size:14px; }
         .cc-btn.secondary { background:var(--surface-2); color:var(--text); border:1px solid var(--border); }
-        .cc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1rem; }
+        /* 메이슨리(다단): 카드가 내용 높이에 딱 맞게 쌓여 짧은 글 아래 흰 여백이 안 생김 */
+        .cc-grid { column-width:320px; column-gap:1rem; }
         /* 카드: 영상 위에 얹을 소스 → 투명 캡처 기준. 미리보기는 surface 배경. */
         .comment-card { background:var(--surface); border:1px solid var(--border); border-radius:12px;
-            padding:1rem; position:relative; }
+            padding:1rem; position:relative; break-inside:avoid; -webkit-column-break-inside:avoid;
+            margin-bottom:1rem; }
         .cc-head { display:flex; gap:.6rem; align-items:flex-start; }
         .cc-avatar { width:40px; height:40px; border-radius:50%; flex-shrink:0; object-fit:cover; background:var(--surface-2); }
         .cc-meta { flex:1; min-width:0; }