도구 실행
CSS 그리드 생성기는 웹 레이아웃에 필요한 CSS Grid 코드를 빠르게 작성하도록 돕는 도구입니다. 열과 행의 개수나 단위를 설정하고 여백 값을 입력하면 표준 CSS 속성으로 구성된 레이아웃 코드가 만들어집니다. 열 항목에 숫자만 입력하면 1fr 단위의 repeat 표기법이 적용되며, 행 항목에 숫자를 입력하면 auto 단위의 repeat 표기법으로 변환됩니다. 200px 1fr과 같은 사용자 지정 텍스트를 직접 입력하여 원하는 크기 비율을 설정할 수도 있습니다. 전체 여백뿐 아니라 열 간격과 행 간격을 픽셀 단위로 세부 조절할 수 있습니다.
사용 방법
- 열(Columns) 입력란에 원하는 열 개수(예: 3) 또는 크기 정의(예: 200px 1fr)를 입력합니다.
- 행(Rows) 입력란에 원하는 행 개수 또는 크기(기본값: auto)를 입력합니다.
- 전체 여백(Gap), 열 여백(Column Gap), 행 여백(Row Gap) 수치를 픽셀 단위 숫자로 설정합니다.
- 실행 버튼을 누르면 생성된 CSS 그리드 속성 코드가 결과 영역에 표시됩니다.
- 생성된 display: grid 및 템플릿 코드를 복사하여 스타일시트에 적용합니다.
예시
- 기본 3열 레이아웃: 열에 3, 행에 auto, 전체 여백에 10을 입력하면 repeat(3, 1fr) 열 템플릿과 10px 간격이 포함된 CSS 코드가 생성됩니다.
- 사이드바 및 콘텐츠 분할: 열에 '200px 1fr', 행에 2, 열 여백에 20을 입력하면 고정 너비와 가변 너비가 조합된 CSS 그리드 코드가 생성됩니다.
자주 묻는 질문
열이나 행 입력란에 숫자만 넣으면 어떻게 처리되나요?
열 입력란에 숫자 N을 입력하면 repeat(N, 1fr)로 자동 변환되며, 행 입력란에 auto가 아닌 숫자를 입력하면 repeat(N, auto)로 변환됩니다.
fr이나 px 같은 사용자 지정 단위를 직접 사용할 수 있나요?
숫자 단독 입력이 아닌 '1fr 2fr' 또는 '250px 1fr'과 같은 텍스트를 입력하면 해당 문자열이 그대로 그리드 템플릿 속성에 반영됩니다.
여백 값이 0일 때도 CSS 속성이 출력되나요?
0으로 설정된 여백 속성은 생성되는 CSS 코드에서 자동으로 제외되어 불필요한 속성 출력을 줄입니다.