CSS 그리드 생성기

CSS 그리드는 페이지를 행과 열로 동시에 배치합니다. 이 생성기는 열과 행 템플릿(repeat(), fr, minmax(), auto-fill), 간격, 정렬로 컨테이너 규칙을 쓰고, 이름 있는 영역을 간단한 텍스트 스케치로 입력하면 grid-template-areas와 영역마다 grid-area 규칙 하나를 만들어 주며 그에 맞는 HTML도 제공합니다. 먼저 문법을 검사해서, 알 수 없는 트랙 크기, 길이가 다른 행, 직사각형이 아닌 영역을 조용히 무시하지 않고 알려 드리며, 레이아웃은 사용자의 브라우저에서 그려 보여 줍니다.

사용 방법

1. 열 템플릿을 입력합니다. 예: repeat(3, 1fr) 또는 200px 1fr.
2. 원하면 행을 입력하고 이름 있는 영역을 한 줄에 한 행씩 스케치합니다.
3. 행·열 간격과 항목 정렬을 설정합니다.
4. CSS와 HTML을 복사합니다. 미리보기에는 브라우저가 계산한 레이아웃이 나옵니다.

계산식

display: grid; grid-template-columns: <트랙>; grid-template-rows: <트랙>; grid-template-areas: "a a" "b c"; gap: <행> <열>;

트랙은 길이(200px), 유연한 비율(1fr), auto, min-content, max-content, minmax(min, max) 또는 fit-content()입니다. grid-template-areas에서는 모든 행의 칸 수가 같아야 하고 각 이름이 직사각형을 덮어야 하며, "."는 칸을 비워 둡니다.

예시

열 200px 1fr, 행 auto 1fr auto, 영역 "header header / sidebar main / footer footer"는 전형적인 페이지 레이아웃인 2열 × 3행이 되며, gap: 16px 24px로 행 사이 16 px, 열 사이 24 px을 두고 .header { grid-area: header; } 같은 규칙이 생깁니다. 기본값 repeat(3, 1fr)에 항목 6개이면 같은 너비의 3열 × 2행이 됩니다.