CSS Grid 생성기
CSS Grid 레이아웃을 라이브 미리보기로 시각적으로 생성합니다. 열, 행, 간격, 템플릿을 조정하세요. CSS 코드 복사. 무료, 100% 브라우저에서 실행.
미리보기
CSS 출력
참고
CSS Grid란?
CSS Grid는 행과 열의 2차원으로 콘텐츠를 배치하는 레이아웃 시스템입니다. Flexbox가 1차원 레이아웃에 최적인 반면, Grid는 행과 열을 동시에 제어할 수 있습니다. 복잡한 페이지 레이아웃과 대시보드 제작에 강력합니다.
그리드 템플릿
grid-template-columns — 열의 크기와 수를 정의. 1fr 1fr 1fr로 균등 3열, repeat(3, 1fr)로도 동일. grid-template-rows — 행의 크기와 수를 정의. fr 단위 — 사용 가능한 공간의 비율을 지정. minmax() — 최소와 최대 크기 범위를 지정. auto-fill / auto-fit — 반응형 열 수 자동 조정.
개인정보보호
모든 생성 처리는 브라우저에서 100% 실행됩니다. 데이터는 서버에 전송되지 않습니다.