1–12
1–12
예: 1fr 1fr 1fr, 200px 1fr, repeat(3,1fr)
예: auto, 100px auto, repeat(3,80px)
셀 스팬 (셀 선택)
스팬된 셀은 녹색으로 표시됩니다.
셀을 클릭하여 선택한 후, 아래에서 열/행 스팬을 설정하세요.
생성된 CSS
CSS Grid란?
CSS Grid Layout은 최신 브라우저에 내장된 2차원 레이아웃 시스템입니다. display: grid로 그리드 컨테이너를 정의하고, grid-template-columns으로 열을, grid-template-rows로 행을 제어합니다. 분수 단위(fr)는 사용 가능한 공간을 비례적으로 분배합니다. 자식 요소는 grid-column: span N과 grid-row: span N을 사용하여 여러 열 또는 행에 걸쳐 배치될 수 있습니다.
CSS Grid 생성기 사용 방법
-
숫자 입력 필드(각 1–12)를 사용하여 열과 행의 수를 설정하세요.
-
grid-template-columns와 grid-template-rows를 조정하여 크기를 제어하세요 (예: 1fr 2fr, 200px auto).
-
셀 사이의 간격을 설정하세요 (예: 10px, 1rem).
-
미리보기에서 셀을 클릭하여 선택하세요 (주황색으로 변합니다).
-
셀 스팬 패널에서 col-span과 row-span을 설정한 후 적용을 클릭하세요. 스팬된 셀이 녹색으로 변합니다.
-
CSS 또는 HTML 탭을 클릭하여 출력 형식을 전환한 후 클립보드에 복사하세요.
-
모두 초기화를 클릭하면 새로운 3×3 그리드로 다시 시작합니다.