CSS Grid 생성기 (레이아웃 코드 · 영역 이름 · 반응형)

Grid의 기본 구조

display: grid를 준 컨테이너는 grid-template-columns와 grid-template-rows로 열·행 트랙을 정의하고, 자식 요소가 그 칸에 자동으로 배치됩니다. repeat(3, 1fr)은 "1fr 1fr 1fr"의 줄임이며, fr은 남는 공간을 나눠 갖는 단위입니다. gap은 칸 사이 간격만 만들고 바깥 테두리에는 붙지 않아 margin으로 간격을 만들 때 생기는 첫·끝 요소 예외 처리가 필요 없습니다. Flexbox가 한 방향(행 또는 열)의 흐름이라면 Grid는 2차원 배치이므로, 카드 목록은 둘 다 가능하지만 헤더·사이드바·본문·푸터 같은 페이지 골격은 Grid가 훨씬 간단합니다.

영역 이름으로 배치하기

grid-template-areas는 각 행을 문자열로 적고 칸마다 이름을 넣는 방식입니다. 같은 이름이 이어진 칸은 하나의 영역으로 합쳐지고, 자식에는 grid-area: 이름만 주면 됩니다. 빈 칸은 .으로 표시합니다. 규칙이 하나 있는데, 같은 이름의 칸은 반드시 직사각형을 이뤄야 합니다. L자 모양이 나오면 브라우저가 areas 선언 전체를 무시하므로 이 도구는 그 경우 경고합니다. 반응형에서는 areas 문자열만 다시 적으면 HTML 순서를 바꾸지 않고도 배치를 완전히 바꿀 수 있어, 모바일에서 사이드바를 본문 아래로 보내는 것이 CSS 한 줄로 끝납니다.

열 폭 선택 기준

1fr은 균등 분할이지만 내용이 긴 칸이 있으면 그 칸이 커질 수 있어 완전한 균등은 minmax(0, 1fr)입니다. auto는 내용 너비에 맞추고, 고정 px는 정확한 폭이 필요한 사이드바 등에 씁니다. minmax(200px, 1fr)는 최소 200px을 보장하면서 남는 공간을 나누는 형태로, 여기에 repeat(auto-fill, …)을 조합하면 미디어쿼리 없이 화면 너비에 따라 열 수가 자동으로 바뀌는 카드 그리드가 됩니다. 이 도구는 열 수를 고정한 버전을 만들고, 자동 열 수는 결과의 repeat 부분을 repeat(auto-fill, minmax(200px, 1fr))로 바꾸면 됩니다.

반응형 미디어쿼리

결과의 @media (max-width: …) 블록은 기준점 이하에서 한 열로 바꾸고 영역을 세로로 쌓는 가장 단순한 예시입니다. 실제로는 태블릿 단계를 하나 더 두거나, 사이드바를 본문 아래가 아니라 위로 올리는 등 순서를 바꾸는 경우가 많으므로 areas 문자열 순서를 편집해 쓰면 됩니다. 행 높이를 auto로 두는 이유는 한 열로 쌓일 때 고정 높이가 내용을 잘라 버리기 때문입니다.

자주 묻는 질문