CSS Grid 생성기
Loading CSS Grid Editor...
CSS Grid란?
CSS Grid Layout은 CSS에서 가장 강력한 레이아웃 시스템입니다. 열과 행을 모두 다룰 수 있는 2차원 시스템으로, 주로 1차원인 flexbox와 다릅니다.
CSS Grid 생성기 사용 방법
1
그리드 크기 설정
사이드바 컨트롤로 열, 행, 간격을 정의하세요.
2
그리드 영역 정의
미리보기에서 클릭하고 드래그하여 사각형 영역을 선택하세요.
3
단위 사용자 정의
입력 필드를 사용하여 열과 행 크기를 조정하세요.
4
템플릿 사용
Holy Grail, Blog, Dashboard 등 미리 만들어진 레이아웃 중 선택하세요.
5
코드 생성
"코드 생성"을 클릭하여 바로 사용 가능한 CSS와 HTML을 내보내세요.
CSS Grid 구문 가이드
CSS Grid의 핵심은 grid-template-columns(열 너비 정의), grid-template-rows(행 높이 정의), grid-gap(간격 설정)과 같은 속성입니다. 분수 단위(fr)를 사용하면 뷰포트 크기에 맞춰 유연하게 변하는 레이아웃을 만들 수 있습니다.
CSS Grid 레이아웃 예시
일반적인 예시로는 'Holy Grail' 레이아웃(헤더, 사이드바, 메인, 푸터)과 '메인/사이드바' 레이아웃이 있습니다. grid-template-areas를 사용하면 직관적인 이름으로 이러한 영역을 정의할 수 있어 코드가 훨씬 깔끔해집니다.
자주 묻는 질문
CSS Grid란?
CSS Grid는 행과 열로 복잡한 반응형 레이아웃을 만들 수 있는 2차원 레이아웃 시스템입니다.
이 생성기를 어떻게 사용하나요?
열과 행을 설정하고 간격을 조정한 후 그리드에서 드래그하세요. "코드 생성"을 클릭하세요.
어떤 단위를 사용할 수 있나요?
CSS Grid는 fr, px, %, auto, min-content, max-content, minmax()를 지원합니다.
grid-template-areas란?
ASCII art 구문으로 명명된 그리드 영역을 정의하는 CSS 속성입니다.
레이아웃을 내보낼 수 있나요?
네! "코드 생성" 버튼으로 CSS와 HTML 코드를 확인할 수 있습니다.
이 도구는 무료인가요?
네, 완전히 무료입니다. 가입이 필요 없습니다.