CSS Grid로 만드는 매거진형 블로그 레이아웃 — 카드형 콘텐츠 구성 완전 정복
"CSS Grid" 한 줄이면 네이버 블로그 메인처럼 정돈된 카드형 레이아웃을 내 티스토리에도 그대로 구현할 수 있다. float, inline-block 같은 구식 방법 쓰다가 레이아웃 무너지는 거 몇 번 겪고 나서 Grid로 넘어왔는데, 솔직히 왜 이걸 이제야 썼나 싶었다. 복잡한 JS 없이 CSS만으로 반응형 매거진 레이아웃이 되는 게 신기할 정도다.
📋목차
- <>CSS Grid가 뭔지부터 짚고 가자
- 왜 매거진형 레이아웃이 블로그 수익에 유리한가
- 기본 Grid 코드 구조 뜯어보기
- 카드형 콘텐츠 블록 만들기
- 모바일 반응형 처리하기
- 티스토리에 실제로 적용하는 방법
- 초보자가 자주 하는 실수 3가지
- 정리
🧩 CSS Grid가 뭔지부터 짚고 가자
CSS Grid는 행(row)과 열(column)을 동시에 제어할 수 있는 2차원 레이아웃 시스템이다. Flexbox가 한 방향(가로 또는 세로)만 다루는 것과 달리, Grid는 가로·세로를 동시에 설계한다. 쉽게 말하면 Flexbox가 기차 칸이라면, "CSS Grid"는 바둑판이다. 어느 칸에 무엇을 놓을지 내가 직접 좌표를 정할 수 있다.
2017년부터 주요 브라우저가 모두 지원하고 있어서 지금은 실무에서 당연하게 쓰인다. 크롬, 사파리, 파이어폭스, 엣지 모두 걱정 없다.
💰 왜 매거진형 레이아웃이 블로그 수익에 유리한가
애드센스 수익은 결국 사용자가 얼마나 오래 머무느냐, 얼마나 많은 글을 보느냐에 달려 있다. 매거진형 카드 레이아웃은 한 눈에 여러 글을 보여줘서 클릭을 자연스럽게 유도한다. 네이버 뉴스, 브런치, 해외 매거진 사이트가 다 이 구조를 쓰는 이유가 있다.
카드형 구성은 썸네일 이미지, 제목, 날짜를 깔끔하게 묶어주기 때문에 시각적 피로도도 낮다. 이게 체류 시간에 직결되고, 체류 시간은 광고 노출 횟수를 높인다. 개인적으로 리스트형 레이아웃에서 카드형으로 바꾼 뒤 페이지뷰가 약 30% 올랐던 경험이 있다.
🔧 기본 Grid 코드 구조 뜯어보기
아래가 가장 기본적인 "CSS Grid" 3열 구조다.
.blog-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}repeat(3, 1fr)은 "3개의 열을 동일한 비율로 나눠라"는 뜻이다. 1fr은 남은 공간을 분수(fraction)로 나누는 단위다. gap은 칸 사이 여백이다. 이 세 줄만 있어도 기본 3열 그리드가 완성된다.
여기서 2열은 repeat(2, 1fr), 4열은 repeat(4, 1fr)로 숫자만 바꾸면 된다. 이걸 처음 알았을 때 진짜 허탈했다. 이게 전부였나 싶어서.
🃏 카드형 콘텐츠 블록 만들기
카드 하나의 HTML 구조는 이렇게 잡는다.
<div class="blog-list">
<div class="card">
<img src="thumbnail.jpg" alt="글 썸네일">
<div class="card-body">
<span class="category">CSS</span>
<h2>CSS Grid 완전 정복</h2>
<p>오늘은 Grid 레이아웃을 배워봅니다...</p>
<time>2025.06.01</time>
</div>
</div>
</div>.card {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.card img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.card-body {
padding: 16px;
}
.card h2 {
font-size: 1.1rem;
margin: 8px 0;
line-height: 1.5;
}aspect-ratio: 16 / 9로 이미지 비율을 고정하는 게 핵심이다. 이게 없으면 이미지 높이가 제각각이 되어서 카드 높이가 들쑥날쑥해진다. object-fit: cover는 이미지가 잘리더라도 비율을 유지해준다.
📱 모바일 반응형 처리하기
"CSS Grid"의 진가는 반응형에서 나온다. auto-fill과 minmax()를 조합하면 미디어 쿼리 없이도 반응형이 된다.
.blog-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}minmax(280px, 1fr)은 "최소 280px, 남은 공간은 비율로 채워라"는 뜻이다. 화면이 좁아지면 자동으로 2열, 1열로 줄어든다. 이게 싫다면 미디어 쿼리로 직접 제어해도 된다.
@media (max-width: 768px) {
.blog-list {
grid-template-columns: 1fr;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.blog-list {
grid-template-columns: repeat(2, 1fr);
}
}태블릿은 2열, 모바일은 1열. 이게 가장 무난하고 안전한 설정이다.
🛠️ 티스토리에 실제로 적용하는 방법
티스토리 관리자 → 꾸미기 → 스킨 편집 → HTML 탭에서 글 목록 영역을 찾아야 한다. 보통 <div class="list_content"> 혹은 <div id="article-list"> 형태로 되어 있다.
CSS 탭에서 해당 클래스에 display: grid 속성을 추가하면 된다. 주의할 점은 기존 스킨의 float이나 display: flex 속성이 충돌할 수 있으니 기존 속성을 먼저 제거하거나 display: grid !important로 덮어씌워야 할 때도 있다.
스킨마다 구조가 다르기 때문에 F12(개발자 도구)로 실제 클래스명을 확인하고 작업하는 게 제일 안전하다. 내가 처음에 이 과정 건너뛰었다가 레이아웃 완전히 깨먹은 적이 있다. 꼭 백업 먼저 하고 작업하자.
⚠️ 초보자가 자주 하는 실수 3가지
첫 번째, 부모 요소에만 Grid를 적용하지 않는 경우. display: grid는 자식 요소에 적용하는 게 아니라 부모 컨테이너에 적용해야 한다. 자식에 걸면 아무 일도 안 일어난다.
두 번째, gap 대신 margin을 쓰는 경우. 카드에 margin을 주면 마지막 카드에도 margin이 붙어서 오른쪽 끝이 삐져나올 수 있다. Gap은 아이템 사이에만 적용되므로 훨씬 안전하다.
세 번째, 이미지에 width: 100%만 주고 height를 고정하는 경우. height를 px로 고정하면 이미지 비율이 깨진다. 앞서 말한 aspect-ratio와 object-fit: cover 조합을 쓰는 게 정석이다.
✅ 정리
"CSS Grid"는 배우는 데 하루면 충분하고, 쓰기 시작하면 이전으로 돌아가기 싫어지는 도구다. 매거진형 카드 레이아웃 하나만 잘 만들어도 블로그의 첫인상이 완전히 달라진다. 독자가 첫 페이지에서 여러 글을 훑어볼 수 있는 구조를 만들어주는 것 자체가 체류 시간과 광고 수익에 긍정적인 영향을 준다. 일단 코드 복붙해서 본인 블로그에 먼저 얹어보는 것부터 시작하자.
참고 자료 및 출처
- MDN Web Docs — CSS Grid Layout: https://developer.mozilla.org/ko/docs/Web/CSS/CSS\_grid\_layout
- CSS-Tricks — A Complete Guide to CSS Grid: https://css-tricks.com/snippets/css/complete-guide-grid/
- Google Search Central — Core Web Vitals: https://developers.google.com/search/docs/appearance/core-web-vitals