flex는 한 방향(행 또는 열) 레이아웃에 최적화되어 있다면, grid는 가로와 세로를 동시에 제어하는 2차원 레이아웃에 최적화되어 있습니다. 특히 미디어 쿼리(Media Query)를 최소화하면서도 유연한 반응형 리스트를 만들 때 빛을 발합니다.

1. 반복되는 카드형 리스트 최적화 (repeat, auto-fill)
게시판의 갤러리 리스트를 만들 때, 화면 크기에 따라 아이템 개수를 일일이 지정할 필요가 없습니다.

.gallery-list {
display: grid;
/* 핵심: 너비가 최소 250px인 아이템을 빈 공간이 없도록 자동으로 채움 */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px; /* 아이템 사이의 간격 설정 */
}
효과: 미디어 쿼리 없이도 브라우저 너비에 따라 1열, 2열, 4열 등으로 자동 재배치됩니다.

2. grid-template-areas로 가시적인 구조 잡기
웹사이트의 전체 레이아웃(헤더, 사이드바, 본문, 푸터)을 짤 때 코드만 보고도 구조를 파악할 수 있는 직관적인 방법입니다.
.wrapper {
display: grid;
grid-template-areas:
"header header"
"content sidebar"
"footer footer";
grid-template-columns: 1fr 300px;
grid-template-rows: auto 1fr auto;
height: 100vh;
}

header { grid-area: header; }
main { grid-area: content; }
aside { grid-area: sidebar; }
footer { grid-area: footer; }

3. 모바일 대응을 위한 영역 재배치
미디어 쿼리 안에서 영역의 배치만 살짝 바꿔주면 모바일 레이아웃이 즉시 완성됩니다.
@media (max-width: 768px) {
.wrapper {
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
}